带值的 TextInput 不会改变值

Posted 2023-04-18

【中文标题】带值的 TextInput 不会改变值

【英文标题】：TextInput with value doesn't change value

【发布时间】：2019-06-04 16:29:34

【问题描述】：

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

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

【参考方案1】：

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

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

阅读更多关于处理TextInputhere

【参考方案2】：

在我将 value 属性更改为 defaultValue 之前，我遇到了同样的问题，如下所示：

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

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

【讨论】：

为我节省了很多工作 thx

【参考方案3】：

在我将 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 - 使用这个

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

【参考方案4】：

首先您需要声明状态，然后将该状态应用于 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)/>

希望这有效..

【讨论】：

onChangeText=value=> this.setState( email: value) 在这里你会得到不正确的值，因为事件对象被传递给处理函数。正确的代码是event => this.setState(email: event.target.value)

【参考方案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) />

【参考方案6】：

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

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