一尘不染

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

node.js

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


阅读 215

收藏
2020-07-07

共1个答案

一尘不染

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

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

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

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

例如

this.state = { name: '' };

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

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

2020-07-07