带值的 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
))
/>;
阅读更多关于处理TextInput
here
【讨论】:
【参考方案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'
/>
【讨论】:
以上是关于带值的 TextInput 不会改变值的主要内容,如果未能解决你的问题,请参考以下文章