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

Question

我有一个简单的反应组件,我相信有一个受控输入的形式:

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

Answer 1

我相信我的输入是有控制的,因为它有一个值.

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

在您的示例中最初未满足该条件,因为this.state.name最初未设置.因此,输入最初是不受控制的.一旦onChange处理程序第一次被触发,this.state.name就会被设置.此时,满足上述条件并且认为输入受到控制.从不受控制到受控制的过渡产生了上面看到的错误.

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

例如

this.state = { name: '' };

输入将从一开始就被控制,解决问题.有关更多示例,请参阅React Controlled Components.

与此错误无关,您应该只有一个默认导出.你上面的代码有两个.

Answer 2

当你第一次渲染你的组件时,this.state.name没有设置,所以它评估为undefined,你最终传递value={undefined}给你的input.

当ReactDOM检查字段是否被控制时,它会检查是否value != null(注意它是!=,而不是!==),并且因为undefined == null在JavaScript中,它决定它是不受控制的.

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

如果你this.state = {name: ''}在构造函数中执行,因为'' != null,您的输入将始终具有值,并且该消息将消失.

Answer 3

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

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

Answer 4

我有同样的问题。问题是当我将状态信息保留为空白时

  const [name, setName] = useState()

我通过添加这样的空字符串来修复它

  const [name, setName] = useState('')

Answer 5

我知道其他人已经回答了这个问题.但是,这里一个非常重要的因素可能会帮助其他人遇到类似的问题:

您必须onChange在输入字段中添加处理程序(例如textField,checkbox,radio等).并始终通过onChange处理程序处理活动,如:

<input ... onChange={ this.myChangeHandler} ... />

当你使用复选框时,你可能需要处理它的checked状态,!!如:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

参考:https://github.com/facebook/react/issues/6779#issuecomment-326314716

Answer 6

在构造函数中将字段值设置为“”（空字符串）的一个潜在弊端是，如果该字段是可选字段并且未编辑。除非您在发布表单之前进行一些按摩，否则该字段将作为空字符串而不是NULL保留在数据存储中。

此替代方法将避免使用空字符串：

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

Answer 7

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

不正确的方法：

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

正确方法：

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

Answer 8

解决此问题的简单方法是默认设置一个空值：

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

Answer 9

如果组件上的 props 作为状态传递，请为输入标签设置默认值

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

Answer 10

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

this.state={ name:''};

Answer 11

就我而言，我确实缺少了一些琐碎的东西。

<input value={state.myObject.inputValue} />

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

state = {
   myObject: undefined
}

通过更改状态以引用我的值的输入，我的问题得以解决：

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

Answer 12

对此的更新。对于 React Hooks 使用const [name, setName] = useState(" ")

Answer 13

如果 this.state.name 为 null，则只需创建一个后备到 '' 。

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

这也适用于 useState 变量。