如何在不受控制/受控制的輸入之間切換？ 反應

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)}}
        />
    )
}

如果像這樣使用它，則會得到：

1. 將狀態放置在構造函數中，以便可以使用this.setState進行更改。

2. 僅當事件發生時才觸發onChange並且不會自動觸發。

3. 您需要通過處理程序鏈向下傳遞事件，以便處理程序可以訪問該事件。

4. 不知道您的意思是updateInput = field => event => {}那時鏈中沒有事件，因此您無法訪問它。

希望能幫助到你 ：）