带值的 TextInput 不会改变值

Posted

技术标签:

【中文标题】带值的 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=&gt; this.setState( email: value) 在这里你会得到不正确的值,因为事件对象被传递给处理函数。正确的代码是event =&gt; 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'
/>

【讨论】:

以上是关于带值的 TextInput 不会改变值的主要内容,如果未能解决你的问题,请参考以下文章

带值的 Angular 属性组件

react-native textinput securetextentry 星而不是点

如何使用 Vue 创建一个带值的复选框

闪亮:从具有多个值的 textInput 中子集表

R 更新 textInput 值的闪亮延迟

如何在不使用值的情况下清除 TextInput