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

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

当前回答

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

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

源

2022-12-13 22:49:18

其他回答

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

这是value的默认状态

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

我的错误是

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

解是-

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

最后一个char丢失了

2022-09-22 06:39:03

只需创建一个回退到“if this.state.name为空”。

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

这也适用于useState变量。

2020-03-31 20:58:00

我也有同样的问题。问题是当我保持状态信息空白

  const [name, setName] = useState()

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

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

2022-02-11 09:59:41

在构造函数中将字段值设置为“”(空字符串)的一个潜在缺点是，如果该字段是一个可选字段，并且未被编辑。除非在发布表单之前做一些处理，否则该字段将作为空字符串持久化到数据存储中，而不是NULL。

这个选项将避免空字符串:

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

... 

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

2018-10-27 01:36:49

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

你必须有一个onChange处理程序添加在您的输入字段(例如textField，复选框，无线电等)。始终通过onChange处理程序处理活动。

例子:

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

当你使用复选框时，你可能需要用!!来处理它的选中状态。

例子:

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

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

2017-11-08 06:57:06

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

推荐文章

最新文章

标签