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

Question

我有一个简单的反应组件，我相信它有一个受控输入的表单：

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

原文由 alexs333 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我相信我的输入是受控的，因为它具有价值。

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

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

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

例如

this.state = { name: '' };

输入将从一开始就受到控制，从而解决问题。有关更多示例，请参阅 React 受控组件。

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

原文由 fvgs 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

When you first render your component, this.state.name isn’t set, so it evaluates to undefined or null , and you end up passing value={undefined} 或 value={null} 到你的 input 。

当 ReactDOM 检查一个字段是否被控制时， 它检查是否 value != null （注意它是 != undefined == null 而不是 !== ） --- 在JavaScript中，它决定它是不受控制的。

因此，当 onFieldChange() 被调用时， this.state.name 被设置为字符串值，您的输入从不受控制变为受控。

如果您在构造函数中执行 this.state = {name: ''} ，因为 '' != null ，您的输入将始终具有一个值，并且该消息将消失。

原文由 Daisy Leigh Brenecki 发布，翻译遵循 CC BY-SA 4.0 许可协议