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


当前回答

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

其他回答

另一种方法是在输入中设置默认值,如下所示:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

在初始状态下设置一个值为'name'属性。

这一点。状态={名称:"};

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

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

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

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

我在type='radio'时遇到了同样的问题

<input type='radio' checked={item。电台}…/>

原因就是那件物品。例如,无线电并不总是真或假,而是真或未定义。确保它总是布尔值,问题就会消失。

<input type='radio' checked={!!电台}…/>