禁用非默认选中项目的复选框

Question

我有两个复选框项目。其中之一将在进入页面时通过道具默认选择。根据默认选择的项目，其他复选框项目应在进入页面时禁用。

此外，用户可以取消选择默认选中项，在这种情况下，两个复选框都会启用以供选择。当用户随后选择两个选项之一时，未选择的选项将再次被禁用。

工作原理：当我取消选择默认选项并重新选择两个复选框之一时，禁用的行为正常工作（因为未选中的选项被禁用）。

什么不起作用，需要寻找解决方法：当我进入页面时，需要禁用默认未选中的选项。我需要弄清楚如何在进入页面时禁用未选择的选项。

我有一个类组件，其内容如下：

      constructor(props) {
         super(props);
         this.state = {
           aSelected: false,
           bSelected: false
         }
      }
  
     handleCheckboxChange = (e) => {   
         const { checked, value } = e.target;

         // NOTE: 'checked' is a boolean

         if(value=="a") {
            this.setState( {aSelected: checked} );
         }

         if(value=="b") {
            this.setState( {bSelected: checked} );
         } 
     }

     // returns default value of each checkbox based on props
     handleDefault = (trueOrFalse, name) => {   
         if(name == "a") { return trueOrFalse; } 
         if(name == "b") { return trueOrFalse; }
     }

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

<input>
   type="checkbox"
   value="a"
   onChange={this.handleCheckboxChange}
   disabled={ (this.state.aSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
   defaultChecked={this.handleDefault(this.props.selected["a"], "a")}
</input>

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

Answer 1

目前您正在通过 false 值初始化您的 aSelected 和 bSelected 状态，为了处理您的场景，您可以通过组件的 constructor 中的道具初始化您的状态，如下例所示：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      aSelected: props.selectedValue == 'a',
      bSelected: props.selectedValue == 'b',
    };
  }

  handleCheckboxChange = (e) => {
    const { checked, value } = e.target;
    if (value == 'a') {
      this.setState({ aSelected: checked });
    }

    if (value == 'b') {
      this.setState({ bSelected: checked });
    }
  };

  render() {
    return (
      <div>
        <input
          type="checkbox"
          value="a"
          onChange={this.handleCheckboxChange}
          defaultChecked={this.props.selectedValue == 'a'}
          disabled={
            this.state.aSelected ||
            (!this.state.aSelected && !this.state.bSelected)
              ? false
              : true
          }
        />

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

ReactDOM.render(<App selectedValue='a'/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>