组件正在将类型文本的不受控制的输入更改为ReactJS中的受控错误
警告:组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制(反之亦然)。确定在组件的使用寿命中使用受控或非受控输入元素。*
以下是我的代码:
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>
)
}
回答:
原因是,在您定义的状态下:
this.state = { fields: {} }
字段作为空白对象,因此在第一次渲染期间this.state.fields.name
将是undefined
,输入字段的值将为:
value={undefined}
因此,输入字段将变得不受控制。
在输入中输入任何值后,fields
状态将变为:
this.state = { fields: {name: 'xyz'} }
那时输入字段被转换为受控组件;这就是为什么您得到此错误:
组件正在更改要控制的文本类型的不受控制的输入。
1-将fields
进入状态定义为:
this.state = { fields: {name: ''} }
2-或通过使用短路评估来定义值属性,如下所示:
value={this.state.fields.name || ''} // (undefined || '') = ''
以上是 组件正在将类型文本的不受控制的输入更改为ReactJS中的受控错误 的全部内容, 来源链接: utcz.com/qa/400761.html