我有一个简单的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
发布于 2016-05-25 11:59:50
我相信我的输入是被控制的,因为它有一个值。
对于要控制的输入,其值必须与状态变量的值相对应。
在您的示例中,该条件最初并未满足,因为最初未设置this.state.name
。因此,输入最初是不受控制的。一旦第一次触发onChange
处理程序,就会设置this.state.name
。在这一点上,上述条件被满足,并且输入被认为是被控制的。这种从非受控到受控的转换产生了上面看到的错误。
通过在构造函数中初始化this.state.name
:
例如:
this.state = { name: '' };
输入将从一开始就被控制,修复问题。有关更多示例,请参阅React Controlled Components。
与此错误无关,您应该只有一个默认导出。上面的代码有两个。
发布于 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
,那么您的输入将始终具有一个值,并且该消息将消失。
发布于 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
复制相似问题