Question

我在反应组件中有以下方法：

handleCheckBoxClick() {
  var checkbox = document.getElementById("boldCheckbox").checked;
  this.setState({ischecked : checkbox});
  if(this.state.ischecked) {
    this.setState({weight:'bold'});
  } else {
    this.setState({weight:'normal'});
  }
}

但如果我将if语句更改为：

if(checkbox) {
  this.setState({weight:'bold'});
} else {
  this.setState({weight:'normal'});
}

它工作正常但我无法弄清楚为什么第一种方法不起作用。

Answer 1

方法setState()是异步的，并且更新通常是一起批处理的。在您的情况下，ischecked会与weight一起更新，因此当您设置weight时，仍然会引用旧值。

一种解决方案是使用在状态更新后调用的setState()回调。

注意：要获取复选框checked状态，请使用传递给处理程序的事件对象e，而不是查询DOM。

handleCheckBoxClick(e){
   var checked = e.target.checked;
   this.setState({ischecked : checked}, function() {
     if(this.state.ischecked){
        this.setState({weight:'bold'});
     }else{
        this.setState({weight:'normal'});
     }     
   });
}

更好的解决方案是更新这两个属性，因为您知道是否选中了复选框：

handleCheckBoxClick(e){
   var checked = e.target.checked;

   this.setState({
    ischecked : checked,
    weight: checked ? 'bold' : 'normal'
   });
}

Answer 2

那是因为this.setState({ isChecked : checkbox });在if语句中提出之前还没有完成。

设置为boolean时setState不更新

2 个答案: