react实现全选和反选

class Checkboxcomponent extends React.Component{

    constructor(props){

        super(props);

        this.state = {

            chooseList : ['apple','lemon','melon','orange'],

            chooseCheck : 0,

            Allchoose : false,

            reverseCheck : false,

            isAuto : false

        }

    }

    Allchoose(e){

        if(this.state.Allchoose){

            this.setState({

                chooseCheck : 0,

                Allchoose : false,

                isAuto : false,

            })

        }else{

            this.setState({

                Allchoose : true,

                chooseCheck : this.state.chooseList.length,

                isAuto : false,

            });

        }

    }

    checkAllChoose(ItemChecked){

        if(this.state.isAuto = true)this.state.isAuto = false;

        ItemChecked ? this.state.chooseCheck++ : this.state.chooseCheck--;

        console.log(this.state.chooseCheck);

        if(this.state.chooseCheck == this.state.chooseList.length){

            this.setState({

                Allchoose : true,

                isAuto : true

            })

        }else{

            if(this.state.Allchoose == true){

                this.setState({

                    Allchoose : false,

                    isAuto : true

                });

            }

        }

    }

    Reversechoose(e){

        let newNum = this.state.chooseList.length - this.state.chooseCheck;

        if(newNum == this.state.chooseList.length){

            this.setState({

                Allchoose : true,

                isAuto : true

            })

        }else{

            this.setState({

                Allchoose : false,

                isAuto : true

            })

        }

        this.setState({

            reverseCheck : !this.state.reverseCheck,

            chooseCheck : this.state.chooseList.length - this.state.chooseCheck

        });

    }

    render(){

        return (

           

                全选

                {this.Allchoose(e)}} checked = {this.state.Allchoose} />

                反选

                {this.Reversechoose(e)}} checked = {this.state.reverseCheck}/>

                {

                    this.state.chooseList.map((item,idx)=>{

                        return (

                           

                                {item}

                                {this.checkAllChoose(ItemChecked)}} Allchoose = {this.state.Allchoose} Reverse = {this.state.reverseCheck} isAuto = {this.state.isAuto}/>

                           

                        )

                    })

                }

           

        )

    }

}

class CheckboxItemcomponent extends React.Component{

    constructor(props){

        super(props);

        this.state = {

            checked : false,

        }

    }

    _clickHandle(e){

        this.props.checkAllChoose(!this.state.checked);

        this.setState({

            checked : this.state.checked ? false : true

        });

    }

    componentWillReceiveProps(nextprops){

        console.log(nextprops.isAuto);

        if(nextprops.isAuto == false)this.state.checked = nextprops.Allchoose;

        if(nextprops.Reverse != this.props.Reverse){

            this.setState({

                checked : !this.state.checked

            })

        }

    }

    render(){

        return (

            {this._clickHandle(e)}} />

        )

    }

}

---------------------

作者：流云望风

来源：CSDN

原文：https://blog.csdn.net/u012312705/article/details/81827868

版权声明：本文为博主原创文章，转载请附上博文链接！