禁用非默認選中專案的復選框

我有兩個復選框專案。其中之一將在進入頁面時被道具默認選擇。根據默認選擇的專案，其他復選框專案應在進入頁面時禁用。

此外，用戶可以取消選擇默認選中項，在這種情況下，兩個復選框都可以選擇。當用戶隨后選擇兩個選項之一時，未選擇的選項將再次被禁用。

什么作業：當我取消選擇默認選項并重新選擇兩個復選框之一時，禁用的行為正常作業（因為未選中的選項被禁用）。

什么不起作用，需要找到解決方法：當我進入頁面時，默認情況下未選中的選項需要禁用。我需要弄清楚如何在進入頁面時禁用未選擇的選項。

我有一個包含以下內容的類組件：

      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>

uj5u.com熱心網友回復：

目前您正在按值初始化aSelected和bSelected狀態false，為了處理您的場景，您可以通過組件中的道具初始化您的狀態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>

標籤：

上一篇：（朋友類的）成員“Node::next”不可訪問

下一篇：C 復制賦值運算子行為