React -更改不受控制的输入
我有一个简单的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
回答 20
Stack Overflow用户
发布于 2016-05-25 11:59:50
我相信我的输入是被控制的，因为它有一个值。
对于要控制的输入，其值必须与状态变量的值相对应。
在您的示例中，该条件最初并未满足，因为最初未设置this.state.name。因此，输入最初是不受控制的。一旦第一次触发onChange处理程序，就会设置this.state.name。在这一点上，上述条件被满足，并且输入被认为是被控制的。这种从非受控到受控的转换产生了上面看到的错误。
通过在构造函数中初始化this.state.name：
例如：
this.state = { name: '' };输入将从一开始就被控制，修复问题。有关更多示例，请参阅React Controlled Components。
与此错误无关，您应该只有一个默认导出。上面的代码有两个。
Stack Overflow用户
发布于 2016-05-25 12:01:22
当您第一次呈现组件时，没有设置this.state.name，因此它的计算结果为undefined或null，最后将value={undefined}或value={null}传递给input。
当ReactDOM检查某个字段是否受控制时，它会返回it checks to see if value != null (请注意，它是!=，而不是!==)，因为在JavaScript中是undefined == null，所以它决定该字段不受控制。
因此，当调用onFieldChange()时，this.state.name被设置为字符串值，您的输入将从不受控制变为受控制。
如果您在构造函数中执行this.state = {name: ''}，因为是'' != null，那么您的输入将始终具有一个值，并且该消息将消失。
Stack Overflow用户
发布于 2017-07-31 23:13:30
另一种方法是在输入中设置默认值，如下所示：
<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>https://stackoverflow.com/questions/37427508
复制相似问题