复选框值在 setState 中反转

Posted 2023-02-21

【中文标题】复选框值在 setState 中反转

【英文标题】：Checkbox value reversed in 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 );
    

【参考方案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);