Question

我的组件有input：

state = {
    org: {
        orgName: ''
    }
};

updateInput = field => event => {
    this.setState({
        org: {
            [field]: event.target.value
        }
    })
}

render() {
    let { org } = this.state
    return (
        <input
            value={org.orgName}
            onChange={this.updateInput('orgName')}
        />
    )
}

我将input值初始化为''，但只要我在input中输入任何内容，就会收到此错误：

A component is changing a controlled input of type undefined to be uncontrolled

我想如果我初始化了input，那么它将永远被控制，但显然这是错误的。这个input始终被控制的正确方法是什么？

Answer 1

使用以下格式：

constructor(){
    super()
    this.state = {
        org: {
            orgName: ''
        }
    };
}


updateInput = (field, event) => {
    this.setState({
        org: {
            [field]: event.target.value
        }
    })
}

render() {
    let { org } = this.state
    return (
        <input
            value={org.orgName}
            onChange={(event) => {this.updateInput('orgName', event)}}
        />
    )
}

如果你这样使用它，那么你得到：

将状态置于构造函数中，以便您可以使用this.setState进行更改。
onChange仅在事件发生时被触发且未自动触发。
您需要通过处理程序链向下传递事件，以便处理程序可以访问它。
不确定updateInput = field => event => {}的含义是什么时候链中没有事件，因此您无法访问它。

希望有所帮助：）

我如何在不受控制/受控输入之间切换？应对

1 个答案: