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

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

其他回答

当你第一次呈现你的组件时，this.state.name没有设置，所以它的值为undefined或null，你最终将value={undefined}或value={null}传递给你的输入。

当ReactDOM检查一个字段是否受控制时，它会检查value != null(注意它是!=，而不是!==)，由于JavaScript中的undefined == null，它决定它是不受控制的。

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

如果你这样做。在你的构造函数中State = {name: "}，因为" != null，你的输入将一直有一个值，并且该消息将消失。

2016-05-25 04:01:21

这种情况通常只发生在应用程序启动时，您没有控制字段的值，而在某些事件或某些函数触发或状态改变后，您现在试图控制输入字段中的值。

这种从无法控制输入到可以控制输入的转变是导致问题发生的首要原因。

避免这种情况的最佳方法是在组件的构造函数中为输入声明一些值。这样，输入元素在应用程序开始时就有了值。

2019-01-31 17:18:46

解决这个问题的简单方法是在默认情况下设置一个空值:

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

2019-04-18 15:53:40

这是一个更新。对于React Hooks使用const [name, setName] = useState(" ")

2019-07-16 18:36:04

对于使用Formik的用户，需要为表单的initialValues添加特定字段名的默认值。

2021-08-19 15:58:50

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

推荐文章

最新文章

标签