组件正在更改不受控制的文本类型输入，以控制ReactJS中的错误。
组件正在更改不受控制的文本类型输入，以控制ReactJS中的错误。
提问于 2017-10-30 09:47:10
警告:组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制的转换为受控的(反之亦然)。决定在组件的生命周期中使用受控的还是不受控制的输入元素。
以下是我的代码：
constructor(props) {
super(props);
this.state = {
fields: {},
errors: {}
}
this.onSubmit = this.onSubmit.bind(this);
}
....
onChange(field, e){
let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});
}
....
render() {
return(
<div className="form-group">
<input
value={this.state.fields["name"]}
onChange={this.onChange.bind(this, "name")}
className="form-control"
type="text"
refs="name"
placeholder="Name *"
/>
<span style={{color: "red"}}>{this.state.errors["name"]}</span>
</div>
)
}回答 26
Stack Overflow用户
回答已采纳
发布于 2017-10-30 09:54:56
原因是，在您定义的状态中：
this.state = { fields: {} }字段作为空白对象，因此在第一个呈现过程中，this.state.fields.name将是undefined，输入字段的值为：
value={undefined}因此，输入字段将变得不受控制。
一旦在输入中输入任何值，状态下的fields将更改为：
this.state = { fields: {name: 'xyz'} }此时，输入字段被转换为一个受控组件；这就是为什么要获得错误：
组件正在更改要控制的文本类型的无控制输入。
可能的解决方案：
1-将状态中的fields定义为：
this.state = { fields: {name: ''} }2-或者使用如下短路评估定义value属性：
value={this.state.fields.name || ''} // (undefined || '') = ''Stack Overflow用户
发布于 2019-10-07 12:47:52
将value更改为defaultValue将解决这个问题。
Note：
defaultValue只适用于初始负载。如果要初始化input，那么应该使用defaultValue，但如果要使用state更改值，则需要使用value。有关更多信息，请阅读这。
我在input中使用了input来消除这个警告。
Stack Overflow用户
发布于 2019-11-12 09:39:56
在组件内部，将输入框按以下方式放置。
<input className="class-name"
type= "text"
id="id-123"
value={ this.state.value || "" }
name="field-name"
placeholder="Enter Name"
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47012169
复制相关文章
相似问题
腾讯云开发者
