I am trying to use checkboxes in react and the condition is to use only 2 checkboxes at a time and when we use third, it should disable all others till we uncheck another one - so to make total checked max at 2. This is to compare only two results at once.
I am able to get two checkboxes but when i do the third, its disabling all the checkboxes. I am not sure where am i going wrong over here. Any ideas or suggestions would be appreciated. Thanks.
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=>
<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);
Aucun commentaire:
Enregistrer un commentaire