【问题标题】:disable text input after entering some input value in react native在本机反应中输入一些输入值后禁用文本输入
【发布时间】:2019-03-20 13:07:25
【问题描述】:

这是我正在使用的文本输入,我希望在输入值后禁用输入字段。我尝试使用可编辑道具,但没有帮助。 我对本机反应完全陌生,请举个例子。

<View style={editProfileStyle.textinputView}>
  <TextInput
    style={editProfileStyle.textInput}
    placeholder="Enter your Specialization"
    value={this.state.subQualification}
    onChangeText={subQualification => this.setState({ subQualification: subQualification })} 
  />
</View>

【问题讨论】:

  • 您在使用内置可编辑道具时遇到了什么问题?
  • 默认禁用。我希望该字段最初可编辑并在输入值后禁用
  • 在这种情况下只需通过editable={this.state.subQualification.length === 0} 这应该可以解决问题,我也发布了答案

标签: react-native textinput


【解决方案1】:

根据问题,由于该字段在具有某些值时应该被禁用:

<View style={editProfileStyle.textinputView}>
              <TextInput
                editable={this.state.subQualification.length === 0}
                style={editProfileStyle.textInput}
                placeholder="Enter your Specialization"
                value={this.state.subQualification}
                onChangeText={subQualification => this.setState({ subQualification: subQualification })} 
              />
</View>

使用检查您的editable 属性

editable={this.state.subQualification.length === 0} 将在字段中没有任何内容时使字段可编辑

【讨论】:

  • 得到一个类型错误,说 null 不是一个对象(评估 'this.state.subQualification.length')
  • 你有没有在你的状态下将你的subQualification初始化为''?
  • 初始化为空
  • 我把它改成了一个空字符串,它现在可以工作了!非常感谢!
【解决方案2】:

尝试像这样添加状态并修改您的 textInput 道具:

    state ={
    textDisable: true
  }
  render() {
    return (
      <View style={editProfileStyle.textinputView}>

      <TextInput
                style={editProfileStyle.textInput}
                placeholder="Enter your Specialization"
                value={this.state.subQualification}
                onChangeText={subQualification => this.setState({ subQualification: subQualification })}
                editable={this.state.textDisable}
                onEndEditing={() => this.setState({textDisable: false})} 
              />
      </View>
    );
  }
}

onsubmit 后输入应该被禁用。

【讨论】:

  • 这行得通,但我已经存储了状态,因此每次重新加载页面时它都不应该改变状态。
  • 存储状态是什么意思?
猜你喜欢
  • 2017-08-09
  • 1970-01-01
  • 2020-09-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-31
  • 1970-01-01
相关资源
最近更新 更多