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

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

当前回答

简而言之，如果你正在使用类组件，你必须使用状态初始化输入，就像这样:

this.state = { the_name_attribute_of_the_input: "initial_value_or_empty_value" };

你必须对所有的输入都这么做你想在代码中改变它们的值。

在使用功能组件的情况下，你将使用钩子来管理输入值，并且你必须为以后想要操作的每个输入输入初始值，如下所示:

const [name, setName] = React.useState({name: 'initialValue'});

如果你不想有初始值，你可以放一个空字符串。

2022-02-14 15:25:47

其他回答

在我的情况下，在设置状态时出现拼写错误，导致定义值未定义。

这是value的默认状态

const [email, setEmail] = useState(true);

我的错误是

setEmail(res?.data?.notificationSetting.is_email_notificatio);

解是-

setEmail(res?.data?.notificationSetting.is_email_notification);

最后一个char丢失了

2022-09-22 06:39:03

就我而言，我错过了一些非常微不足道的东西。

<输入值= {state.myObject。inputValue} / >

当我收到警告时，我的状态如下:

state = {
   myObject: undefined
}

通过交替我的状态来引用我的值的输入，我的问题得到了解决:

state = {
   myObject: {
      inputValue: ''
   }
}

2019-01-17 03:06:21

请试试这段代码

import React from "react";

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: "" };
        this.onFieldChange = this.onFieldChange.bind(this);
    }

    onFieldChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange} />
        </form>
        );
    }
}

export default MyForm;

2021-09-28 12:24:38

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

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

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

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

e.g.