在setState中反转复选框值

Question

我需要根据复选框更改组件的状态，有一个奇怪的问题，setState中的值与event.target.checked的值相反。

根据上述代码：

如果。target.checked===真=

如果。target.checked===假=

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

Answer 1

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

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

Answer 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前加了一个感叹号，表示“不是”前一个值。

Answer 3

只需添加一个前缀 到事件.目标。选中以反转其值

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