小编典典

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

all

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

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


阅读 116

收藏
2022-03-14

共1个答案

小编典典

我相信我的输入是受控的,因为它具有价值。

对于要控制的输入,它的值必须对应于状态变量的值。

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

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

例如

this.state = { name: '' };

输入将从一开始就受到控制,从而解决问题。

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

2022-03-14