Reactjs - не удалось установить условие/ограничение на флажке выбрать опцию

Question

Я пытаюсь использовать флажки в реале, и условие состоит в том, чтобы использовать только 2 флажка за раз, а когда мы используем третье, он должен отключить все остальные, пока мы не снимем флажок другой - так, чтобы общее количество проверенных max равно 2. Это сравнение сразу двух результатов.

Я могу получить два флажка, но когда я делаю третий, отключив все флажки. Я не уверен, где я ошибаюсь. Любые идеи или предложения будут оценены. Благодарю.

var App = React.createClass({ 

    getInitialState: function() { 

     return { 

      resultcheck: this.props.resultcheck || false, 
      disabled: this.props.disabled || false, 
      enabled: [] 

     }; 
    }, 
    onResultChoose: function(id,count,event){ 
     var enabled = this.state.enabled; 
     // console.log(id); 
     // console.log(count); 
     this.setState({resultcheck: this.state[event.target.checked]}); 
     console.log(this.state[event.target.checked]); 
     if(event.target.checked){ 
      enabled.push(count); 
     } 
     else{ 
      enabled.pop(); 
     } 
     //console.log(enabled); 
     if(enabled.length == 3){ 
      this.setState({disabled: false); 
      enabled.pop(); 
     } 
     this.setState({enabled:enabled}); 
    },       

    render: function() { 

     var count = 0; 

     return (
       <Grommet.App centered={false}> 
        <Split flex="right"> 

         <Split flex="left"> 
          <Box direction="column" justify="center" pad={{vertical: 'large'}}> 

           <List selectable={true}> 

            {this.state.execList.map((row) => { 

             return (
              <ListItem justify="between" > 
               <span> 
                <Timestamp value={new Date(row.startTime)} /> 
                {" for " + row.runTime + " secs"} 
               </span> 
               <span> 
              <CheckBox id={count} label='compare' checked={this.state.resultcheck} disabled={this.state.disabled} onChange={this.onResultChoose.bind(this,row.executionId,count)}/> 
               </span> 
              </ListItem> 
             ) 
            })} 
           </List> 

          </Box> 


         </Split> 
        </Split> 
       </Grommet.App> 
     ); 
    } 
}); 

var element = document.getElementById('content'); 
ReactDOM.render(React.createElement(App), element); 

Answer 1

Все ваши флажки отключены, потому что ваше состояние ключ для инвалидов является булевой, что вы передаете через к каждому компоненту Checkbox, что означает изменение этого значения изменит все флажки. Вы должны иметь возможность изменить свою отключенную опору, чтобы проверить, не проверена ли она.

<CheckBox 
    id={count} 
    label='compare' 
    checked={this.state.resultcheck} 
    disabled={this.state.disabled && !this.state.resultcheck} 
    onChange={this.onResultChoose.bind(this,row.executionId,count)} 
/> 

Я не совсем уверен, что resultcheck должен делать, но следует отключить только непроверенные коробки, когда у вас есть 3 коробки проверены.