React - 更改不受控制的输入

javascript node.js reactjs react-state

2022-08-29 23:06:51

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

答案 1

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

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

该条件在示例中最初未满足，因为最初未设置。因此，输入最初是不受控制的。首次触发处理程序后，将进行设置。此时，满足上述条件，并认为输入是受控的。这种从不受控制到受控的过渡会产生上述错误。this.state.nameonChangethis.state.name

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

例如：

this.state = { name: '' };

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

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

答案 2

首次呈现组件时，未设置，因此它的计算结果为或，您最终会传递或到 .this.state.nameundefinednullvalue={undefined}value={null}input

当 ReactDOM 检查某个字段是否受到控制时，它会检查值！= null （注意它是，而不是），因为在 JavaScript 中，它决定它是不受控制的。!=!==undefined == null

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

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