带值的文本输入不会更改值

Question

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

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

Answer 1

我遇到了同样的问题，直到我将value道具更改为defaultValue如下所示：

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

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

Answer 2

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

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

在此处阅读有关处理TextInput的更多信息

Answer 3

首先，您需要声明状态，然后将该状态应用于文本输入值。

state: {
     email: ''
}

并首次使用必须添加的 API 值填充文本输入

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

您的文本输入将如下所示：

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

希望这有效..

Answer 4

在我将值属性更改为默认值之前，我也有同样的问题，如下所示：

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

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

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

仅此而已。享受您的编码...

Answer 5

我认为您的处理程序函数中有错误。当您调用 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 6

我不知道

这是否是一个好方法，但达斯汀·斯宾格勒的回答对我没有任何问题。我没有足够的声誉来投票和评论。

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