复选框值在 setState 中反转答案

【问题标题】：Checkbox value reversed in setState复选框值在 setState 中反转
【发布时间】：2019-09-27 11:38:25
【问题描述】：

我需要根据checkbox改变一个组件的状态，有个奇怪的问题，setState中的值是event.target.checked的值的倒数。

根据上面的代码：

如果 .target.checked === true => this.setState set { [event.target.id]: false

如果.target.checked === false => this.setState set { [event.target.id]: true

handleChange(event) {
    if ( event.target.getAttribute('type') == "text"){
        this.setState({ [event.target.id]: event.target.value });
    }else if ( event.target.getAttribute('type') == "checkbox") {
        this.setState({ [event.target.id]: event.target.checked });
    }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

只需将前缀! 添加到event.target.checked 即可反转其值

this.setState({ [event.target.id]: !event.target.checked });

【讨论】：

【解决方案2】：

您应该使用与先前值相反的值。试试这个

handleChange(event) {
    if ( event.target.getAttribute('type') == "text"){
        this.setState({ [event.target.id]: event.target.value });
    }else if ( event.target.getAttribute('type') == "checkbox") {
        this.setState({ [event.target.id]: !event.target.checked });
    }
}

我在 event.target.checked 之前添加了一个感叹号，表示“不是”之前的值。

【讨论】：

【解决方案3】：

已解决，问题在于 setState 的异步性质，现在我使用带有回调的新状态，一切正常。

this.setState({ [fieldId]: fieldValue }, () => { console.log(this.state); }

【讨论】：