禁用非默认项目的复选框选中 [英] Disable checkbox for item that is not defaultChecked

问题描述

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

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

有效方法：当我取消选中默认选项并重新选中两个复选框中的一个时，禁用行为正常工作(因为未选中的选项变为禁用)。

不起作用且需要找到修复程序的选项：当我进入页面时，需要禁用默认情况下未选中的选项。我需要弄清楚如何在进入页面时禁用未选中选项。

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

      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>

推荐答案

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="真">

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>

这篇关于禁用非默认项目的复选框选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！