反应 – 改变一个不受控制的input
我有一个简单的反应组件，我认为它有一个控制input：
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正在改变一个不受控制的文本types的input。 input元素不应该从非受控状态切换到受控状态（反之亦然）。 决定在组件的生命周期中使用受控或非受控input元素
我相信我的input是有控制的，因为它有一个值。 我想知道我做错了什么？
我正在使用React 15.1.0
我相信我的input是有控制的，因为它有一个值。
对于要控制的input，其值必须与状态variables的值相对应。
这个条件在你的例子中最初没有被满足，因为this.state.name最初没有设置。 因此，input最初是不受控制的。 一旦onChange处理程序第一次触发， this.state.name被设置。 此时，满足上述条件，并认为input被控制。 从非受控状态转变为受控状态会产生上面的错误。
通过在构造函数中初始化this.state.name ：
例如
this.state = { name: '' };
input将从一开始就被控制，解决问题。 有关更多示例，请参阅React Controlled组件 。
与此错误无关，您应该只有一个默认导出。 你上面的代码有两个。
当你第一次渲染你的组件时， this.state.name没有被设置，所以它的计算结果是undefined ，并且你最终将value={undefined}传递给你的input 。
当ReactDOM检查一个字段是否被控制时， 它会检查是否value != null （注意它是!= ，不是!== ），并且由于在JavaScript中undefined == null ，所以它决定它是不受控制的。
所以，当onFieldChange()被调用时， this.state.name被设置为一个string值，你的input从失控到被控制。
如果你在你的构造函数中做了this.state = {name: ''} ，因为'' != null ，你的input在整个过程中都会有一个值，那个消息就会消失。
另一种方法是在input内设置默认值，如下所示：
<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>
我知道别人已经回答了。 但是这里可能帮助其他人遇到类似问题的一个非常重要的因素是：
您必须在您的input字段中添加onChange处理程序（例如textField，checkbox，收音机等）。 并且总是通过onChange处理程序处理活动，如：
<input ... onChange={ this.myChangeHandler} ... />
当你使用checkbox时，你可能需要处理它的checked状态!! 喜欢：
<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >
参考： https ： //github.com/facebook/react/issues/6779#issuecomment-326314716
