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

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;

运行我的应用程序时，出现以下警告：

警告：MyForm正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命中使用受控或非受控输入元素

我相信我的输入是有价值的，因此受到控制。我想知道我在做什么错？

我正在使用React 15.1.0

Answer 1

我相信我的输入是有价值的，因此受到控制。

为了控制输入，其值必须与状态变量的值相对应。

在您的示例中，最初没有满足该条件，因为this.state.name没有初始设置。因此，输入最初是不受控制的。一旦onChange处理程序被触发的第一次，this.state.name被设定。此时，满足上述条件，并且认为输入已受到控制。从不受控制到受控制的过渡会产生上述错误。

通过this.state.name在构造html" target="_blank">函数中初始化：

例如

this.state = { name: '' };

从一开始就将控制输入，解决问题。有关更多示例，请参见React Controlled
Components
。

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