反应 - 改变不受控制的输入

本文翻译自：React - changing an uncontrolled input

I have a simple react component with the form which I believe to have one controlled 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;

When I run my application I get the following warning: 当我运行我的应用程序时，我收到以下警告：

Warning: MyForm is changing an uncontrolled input of type text to be controlled. 警告：MyForm正在更改要控制的类型文本的不受控制的输入。 Input elements should not switch from uncontrolled to controlled (or vice versa). 输入元素不应从不受控制切换到受控制（或反之亦然）。 Decide between using a controlled or uncontrolled input element for the lifetime of the component 决定在组件的使用寿命期间使用受控或不受控制的输入元件

I believe my input is controlled since it has a value. 我相信我的输入是有控制的，因为它有一个值。 I am wondering what am I doing wrong? 我想知道我做错了什么？

I am using React 15.1.0 我正在使用React 15.1.0

---

#1楼

参考：https://stackoom.com/question/2x2Bu/反应-改变不受控制的输入

---

#2楼

I believe my input is controlled since it has a value. 我相信我的输入是有控制的，因为它有一个值。

For an input to be controlled, its value must correspond to that of a state variable. 对于要控制的输入，其值必须与状态变量的值相对应。

That condition is not initially met in your example because this.state.name is not initially set. 在您的示例中最初未满足该条件，因为最初未设置this.state.name 。 Therefore, the input is initially uncontrolled. 因此，输入最初是不受控制的。 Once the onChange handler is triggered for the first time, this.state.name gets set. 一旦第一次触发onChange处理程序，就会设置this.state.name 。 At that point, the above condition is satisfied and the input is considered to be controlled. 此时，满足上述条件并且认为输入受到控制。 This transition from uncontrolled to controlled produces the error seen above. 从不受控制到受控制的过渡产生了上面看到的错误。

By initializing this.state.name in the constructor: 通过在构造函数中初始化this.state.name ：

eg 例如

this.state = { name: '' };

the input will be controlled from the start, fixing the issue. 输入将从一开始就被控制，解决问题。 See React Controlled Components for more examples. 有关更多示例，请参阅React Controlled Components 。

Unrelated to this error, you should only have one default export. 与此错误无关，您应该只有一个默认导出。 Your code above has two. 你上面的代码有两个。

---

#3楼

When you first render your component, this.state.name isn't set, so it evaluates to undefined , and you end up passing value={undefined} to your input . 首次渲染组件时，未设置this.state.name ，因此它的计算结果为undefined ，最后将value={undefined}传递给input 。

When ReactDOM checks to see if a field is controlled, it checks to see if value != null (note that it's != , not !== ), and since undefined == null in JavaScript, it decides that it's uncontrolled. 当ReactDOM检查一个字段是否被控制时， 它会检查是否value != null （注意它是!= ，而不是!== ），并且由于JavaScript中的undefined == null ，它决定它是不受控制的。

So, when onFieldChange() is called, this.state.name is set to a string value, your input goes from being uncontrolled to being controlled. 因此，当onFieldChange()时， this.state.name设置为字符串值，您的输入将从不受控制变为受控制。

If you do this.state = {name: ''} in your constructor, because '' != null , your input will have a value the whole time, and that message will go away. 如果你在构造函数中执行this.state = {name: ''} ，因为'' != null ，你的输入将有一个整个值，并且该消息将消失。

---

#4楼

另一种方法是在输入中设置默认值，如下所示：

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

---

#5楼

I know others have answered this already. 我知道其他人已经回答了这个问题。 But one of the very important factor here that may help other people experiencing similar issue: 但是，这里一个非常重要的因素可能会帮助其他人遇到类似的问题：

You must need to have onChange handler added in your input field (eg textField, checkbox, radio, etc). 您必须在输入字段中添加onChange处理程序（例如textField，checkbox，radio等）。 And always handle activity through the onChange handler, like: 并始终通过onChange处理程序处理活动，如：

<input ... onChange={ this.myChangeHandler} ... />

and when you are working with checkbox then you may need to handle its checked state with !! 当你使用复选框时，你可能需要处理其checked状态!! like: 喜欢：

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

Reference: https://github.com/facebook/react/issues/6779#issuecomment-326314716 参考： https ： //github.com/facebook/react/issues/6779#issuecomment-326314716

---

#6楼

如果组件上的props已作为状态传递，请为输入标记设置默认值

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>