this.setState() 不改变值（不是异步更新问题）

Question

请注意，这个问题不是异步更新问题（至少，我不认为它是）。

我有一个 class 组件，其内容如下（为了解决问题而进行了高度简化）：

  constructor(props) {
     super(props);
     this.state = {
       aSelected: false;
       bSelected: false
     }
  }

 handleCheckboxChange = (e) => {   
     const { checked, value } = e.target;
    
     console.log( 'checked: ', checked );

     if(value=="a") {
        this.setState( {aSelected: checked}, () =>  {
        console.log('aSelected: ', this.state.aSelected);
        console.log("---")
     });
     }

     if(value=="b") {
        this.setState( {bSelected: checked}, () =>  {
        console.log('bSelected: ', this.state.bSelected);
        console.log("---")
     });
     } 
 }

在渲染返回的某个地方，我有这个：

<input>
   type="checkbox"
   value="a"
   onChange={this.handleCheckboxChange}
   checked={this.state.aSelected}
   disabled={ (this.state.aSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true} 
</input>

<input>
   type="checkbox"
   value="b"
   onChange={this.handleCheckboxChange}
   checked={this.state.bSelected}
   disabled={ (this.state.bSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
</input>

这是在 Chrome 开发者工具中记录的输出。如您所见，每次我选择和取消选择复选框时，都会适当地切换“选中”。但是，“selected”（应该说“aSelected”）的状态永远不会改变，并且始终具有初始状态值 false。有人知道为什么“selected”（应该说“aSelected”）的值永远不会改变吗？

编辑：我的目标是创建两个复选框项目，用户只能选择一个或选择无。当一个被选中时，另一个应该禁用。

Answer 1

当您调用 setState 更新状态时，React 会重新渲染组件，这会将复选框重置为默认（即未选中）状态。

您还需要使用当前状态来管理复选框。 JSX 应该类似于：

<input
   type="checkbox"
   checked={this.state.aSelected}
   onChange={this.handleCheckboxChange}
/>

在 React 的术语中，这就是所谓的“受控组件”，因为 React 完全负责跟上输入的状态。在此处的文档中阅读更多信息： https://reactjs.org/docs/forms.html#controlled-components 对比 https://reactjs.org/docs/uncontrolled-components.html

编辑以匹配问题的编辑： 在您的渲染函数中，请确保您使用的是this.state.aSlected。请注意，您还需要checked={this.state.aChecked} 属性，否则在下一次渲染时该复选框将被取消选中。 喜欢：

<input
   type="checkbox"
   value="a"
   onChange={this.handleCheckboxChange}
   checked={this.state.aSelected}
   // added for clarification *
   disabled={this.state.aSelected || (!this.state.aSelected && !this.state.bSelected) ? false : true} 
/>

使用工作示例编辑 这是a working CodeSandbox example，选中一个复选框会禁用另一个：

class CheckboxComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      aSelected: false,
      bSelected: false
    };
  }

  handleCheckbox = (event) => {
    if (event.target.name === "boxA") {
      this.setState({ aSelected: event.target.checked });
    } else if (event.target.name === "boxB") {
      this.setState({ bSelected: event.target.checked });
    }
  };

  render() {
    let aDisabled = this.state.bSelected && !this.state.aSelected;
    let bDisabled = this.state.aSelected && !this.state.bSelected;

    return (
      <div>
        <label>
          <input
            type="checkbox"
            name="boxA"
            checked={this.state.aSelected}
            onChange={this.handleCheckbox}
            disabled={aDisabled}
          />
          Checkbox A
        </label>
        <br />
        <br />
        <label>
          <input
            type="checkbox"
            name="boxB"
            checked={this.state.bSelected}
            onChange={this.handleCheckbox}
            disabled={bDisabled}
          />
          Checkbox B
        </label>
      </div>
    );
  }
}