具有值的 TextInput 不会更改值

Question

在我的 react-native 应用程序中，我有一个 API，我正在从中检索数据，并且我在我的输入值中设置数据，用户应该能够编辑这些输入并更新，但是当我尝试输入输入时，它不会输入任何内容并且值保持原样，这是 TextInput 代码：

<TextInput
   placeholder= Email
   value={this.state.info.email}
   onChangeText={email => this.setState({ email })}/>

Answer 1

我认为您的处理程序函数有误。当您调用 setState 时，您更新了 this.state.email 但在您使用的文本输入值中使用了 this.state.info.email，您还将事件对象写入了电子邮件，而不是字段的新值 (event.target.value ).你应该使用这样的东西。

onChangeHandler = event => {
  const newEmail = event.target.value
  this.setState({ info: {email: newEmail})}
}

<TextInput
  placeholder= Email
  value={this.state.info.email}
  onChangeText={this.onChangeHandler.bind(this)} />

Answer 2

首先您需要声明状态，然后将该状态应用于 TextInput 值。

state: {
     email: ''
}

并首次使用 API 值填充 TextInput，您必须添加

componentDidMount(){
  this.setState({email: this.props.info.email});
}

您的 TextInput 将如下所示：

<TextInput
   placeholder= Email
   value={this.state.email}
   onChangeText={value=> this.setState({ email: value})}/>

希望这有用..

Answer 3

因为我认为电子邮件不是您 state.info 的唯一支柱，所以我建议您正确使用 setState()，以便仅修改该字段。根据不变性和 ES6，类似于：

<TextInput
  placeholder="Email"
  value={this.state.info.email}
  onChangeText={text =>
    this.setState(state => ({
      info: {
        ...state.info,
        email: text
    }))
  }
/>;

阅读更多关于处理的信息 TextInput here

Answer 4

在我将 value 道具更改为 defaultValue 之前，我遇到了同样的问题：

<TextInput
   style={styles.inputBox}
   onChangeText={title => this.setState({ title })}
   defaultValue={this.state.title}
   placeholder='Title'
/>

我在 React 的文档中找到了这个信息 here

Answer 5

我不知道这是否是一个好方法，但 Dustin Spengler 答案对我来说没有任何问题。我没有足够的声誉来投票和发表评论。

<TextInput
style={styles.inputBox}
onChangeText={title => this.setState({ title })}
defaultValue={this.state.title}
placeholder='Title'
/>

Answer 6

我也遇到了同样的问题，直到我像这样将 value 属性更改为 defaultValue：

<TextInput
   style={styles.inputBoxSize}
   onChangeText={title => this.setState({ title })}
   defaultValue={this.state.title}
   placeholder='Title'
/>

value={this.state.title} - 而不是这个

defaultValue={this.state.title} - 使用这个

就是这样。享受你的编码...

具有值的 TextInput 不会更改值

TextInput with value doesn't change value

javascript

textinput

react-native