Question

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

基于以上代码：

如果.target.checked === true => this.setState设置{[event.target.id]：false

如果.target.checked ===假=> this.setState设置{[event.target.id]：是

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

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

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

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之前添加了一个感叹号，以指示“ Not”之前的值。

Answer 3

是的，我知道。相反的值可以使它起作用，但仍然存在这样的事实，因为真正的值无缘无故变成了错误，这让我认为有一些问题可以解决，以避免将来出现错误。

Answer 4

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

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

复选框值在setState中反转

4 个答案: