javascript - 反应 - 改变不受控制的输入(React - changing an uncontrolled input)

Question

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)

  ask by alexs333 translate from so

Answer 1

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.

(你上面的代码有两个。)