我有一个简单的react组件的形式，我相信有一个受控的输入:
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<form className="add-support-staff-form">
<input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
</form>
)
}
onFieldChange(fieldName) {
return function (event) {
this.setState({[fieldName]: event.target.value});
}
}
}
export default MyForm;
当我运行我的应用程序，我得到以下警告:
警告:MyForm正在将文本类型的未受控输入更改为
控制。输入元素不应该从不受控切换到
控制(反之亦然)。决定是使用受控的还是
在组件的生命周期内不受控制的输入元素
我相信我的输入是受控的，因为它有一个值。我在想我做错了什么?
我使用的是React 15.1.0
当你第一次呈现你的组件时，this.state.name没有设置，所以它的值为undefined或null，你最终将value={undefined}或value={null}传递给你的输入。
当ReactDOM检查一个字段是否受控制时，它会检查value != null(注意它是!=，而不是!==)，由于JavaScript中的undefined == null，它决定它是不受控制的。
因此，当onFieldChange()被调用时，this.state.name被设置为一个字符串值，你的输入从不受控制变成受控制。
如果你这样做。在你的构造函数中State = {name: "}，因为" != null，你的输入将一直有一个值，并且该消息将消失。
当你在你的输入中使用onChange={this. onfieldchange ('name').bind(this)}时，你必须声明你的状态空字符串作为属性字段的值。
不正确的方法:
this.state ={
fields: {},
errors: {},
disabled : false
}
正确的方法:
this.state ={
fields: {
name:'',
email: '',
message: ''
},
errors: {},
disabled : false
}
我知道其他人已经回答了这个问题。但这里有一个非常重要的因素，可能会帮助其他经历类似问题的人:
你必须有一个onChange处理程序添加在您的输入字段(例如textField，复选框，无线电等)。始终通过onChange处理程序处理活动。
例子:
<input ... onChange={ this.myChangeHandler} ... />
当你使用复选框时，你可能需要用!!来处理它的选中状态。
例子:
<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >
参考:https://github.com/facebook/react/issues/6779 # issuecomment - 326314716
