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

JavaScript

L路易

2020-03-10

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

第398篇《反应-更改不受控制的输入》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答
伽罗MandyTony 2020.03.10

通常，只有当您在应用程序启动时不控制文件的值，并且在某些事件或某些函数被触发或状态改变后，现在尝试控制输入字段中的值时，才会发生这种情况。

首先是导致无法控制问题的转变，就是无法控制输入，然后再对其进行控制。

避免这种情况的最好方法是在组件的构造函数中为输入声明一些值。使输入元素从应用程序开始就具有价值。

Stafan逆天 2020.03.10

在初始状态下将值设置为“名称”属性。

this.state={ name:''};

宝儿AA 2020.03.10

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

老丝Near 2020.03.10

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

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>
西里Stafan小哥 2020.03.10

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

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

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

... 

<input name="name" type="text" value={this.state.name || ''}/>
村村伽罗Mandy 2020.03.10

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

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

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

state = {
   myObject: undefined
}

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

state = {
   myObject: {
      inputValue: ''
   }
}
AEva伽罗 2020.03.10

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

您必须onChange在输入字段（例如textField，复选框，单选框等）中添加处理程序。始终通过onChange处理程序处理活动。

例： 

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

使用复选框时，可能需要使用来处理其checked状态!!。

例：

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

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

null 2020.03.10

我相信我的输入是有价值的，因此受到控制。

为了控制输入，其值必须与状态变量的值相对应。

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

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

例如

this.state = { name: '' };

从一开始就将控制输入，解决问题。有关更多示例，请参见React Controlled Components。

与该错误无关，您应该只有一个默认导出。您上面的代码有两个。

Harry路易小卤蛋 2020.03.10

首次渲染组件时，this.state.name未设置，因此其值为undefined，最终传递value={undefined}给input。

当ReactDOM检查某个字段是否受到控制时，它会检查是否value != null（请注意，它!=不是!==），并且由于undefined == null在JavaScript中，它确定该字段不受控制。

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

如果您this.state = {name: ''}在构造函数中这样做，因为'' != null，您的输入将始终有一个值，并且该消息将消失。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android