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


当前回答

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

这是value的默认状态

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

我的错误是

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

解是-

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

最后一个char丢失了

其他回答

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

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

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

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

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

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

当你在你的输入中使用onChange={this. onfieldchange ('name').bind(this)}时,你必须声明你的状态空字符串作为属性字段的值。

不正确的方法:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

正确的方法:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

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

如果组件上的道具是作为状态传递的,则为输入标记设置默认值

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>