samedi 28 janvier 2017

Reactjs - unable to put a condition/limitation on checkbox select option

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

till 2nd check box

after clicking 3rd check box




Aucun commentaire:

Enregistrer un commentaire