javascript - React - 改变一个不受控制的输入

Question

我有一个简单的 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;

当我运行我的应用程序时，我收到以下警告:

Warning: MyForm is changing an uncontrolled input of type text to be controlled. 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

我相信我的输入是受控的，因为它具有值(value)。我想知道我做错了什么？

我正在使用 React 15.1.0

Answer 1

I believe my input is controlled since it has a value.

对于要控制的输入，它的值必须与状态变量的值相对应。

您的示例中最初未满足该条件，因为最初未设置 this.state.name。因此，输入最初是不受控制的。一旦第一次触发 onChange 处理程序，就会设置 this.state.name。此时，满足上述条件，认为输入受控。这种从不受控到受控的转变会产生上述错误。

通过在构造函数中初始化this.state.name:

例如

this.state = { name: '' };

输入将从一开始就受到控制，从而解决问题。见 React Controlled Components更多示例。

与此错误无关，您应该只有一个默认导出。你上面的代码有两个。