Reactjs - 無法把一個條件/限制的複選框選擇選項

我試圖在反應和條件是在同一時間只能使用2複選框，當我們用第三，應該禁用所有其他直到我們取消使用複選框另一個 - 所以總檢查最大值爲2.這是一次只比較兩個結果。Reactjs - 無法把一個條件/限制的複選框選擇選項

我能夠得到兩個複選框但是當我做第三，它禁用所有的複選框。我不知道我在哪裏錯在這裏。任何想法或建議，將不勝感激。謝謝。

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);

來源

2017-01-29 Atomic Rooster

我回答了你的問題[這裏]（http://stackoverflow.com/a/41902608/3889043）。您是否介意檢查答案是否有助於解決您的問題？ – mrlew

@mrlew我仍然面臨着上述問題，即如果我選擇2項以上的複選框，整個事情是禁用的，而不是其餘3 –

我說的是你的另一個問題.... – mrlew

您的複選框全部被禁用，因爲爲殘疾人的國家重點是，你經過的每一個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盒檢查只應禁用選中複選框。

來源

2017-01-29 05:29:59 shadymoses

這是之前給出了相同的結果。禁用所有的箱子，如果我們選擇超過2個 –

就像我說的，我不能告訴有望做什麼resultcheck。但是，如果你爲殘疾的條件是'''state.disabled &&！checked'''，只應爲未選中複選框真。 – shadymoses

您提供的代碼有問題，所有這些都可以產生副作用了一把：（1）你的突變啓用狀態陣列，（2）你打電話的setState 3周不同時間的'''onResultChoose'' '（你真的應該批次更新到一個單一的電話），（3）你忘了一鍵添加到您的'''ListItem'''地圖功能裏面。如果你沒有在一個數組項添加到的元素，你可能有各種各樣的問題，（4）您使用的計數變量總是= 0的ID爲每'''CheckBox'''和'''onResultChoose'''的第三個參數 – shadymoses

Reactjs - 無法把一個條件/限制的複選框選擇選項

回答

相關問題