web-dev-qa-db-fra.com

comment décocher Checkbox.Group dans Antd React.js

J'ai le code suivant en utilisant https://ant.design/components/checkbox/ , et en essayant de décocher quand une case à cocher a été cochée. Je ne veux pas tout cocher si le bouton est cliqué, décochez tout ou la case cochée.

constructor(props) {
        super(props);
        this.state = {
            checked: true,
        }
        this.onChange = this.onChange.bind(this);
    }


    onChange(value) {
        this.props.onChangeSession(value)
    }

    onChangeBox = e => {
        this.setState({
            checked: e.target.checked,
        });
    };

    unChecked = () => {
        this.props.onChangeSession([])
        this.setState({
            checked: false
        });
    };


    render () {
        const {
            data,
        } = this.props
        return  (
            <div>
                <Button type="primary" size="small" onClick={this.unChecked}>
                   Uncheck
                </Button>
                <Checkbox.Group 
                    style={{ width: '100%' }} 
                    onChange={this.onChange}>
                    <div>
                        <div className="filter-subhead">Track</div>

                        {data.map(i => 
                            <div className="filter-item">
                                <Checkbox
                                checked={this.state.checked}
                                onChange={this.onChangeBox}
                                value={i}>{i}</Checkbox>
                            </div>
                        )}                     
                    </div>
                </Checkbox.Group> 
            </div>

        )
    }

Toute aide sera appréciée!

javascriptreactjsantdant-design-pro
3
Mandoxsy

Si vous allez utiliser un map pour générer dynamiquement les cases à cocher, utiliser l'état pour garder une trace de la valeur vérifiée sera délicat. Tu ne devrais pas faire ça.

Ce que vous devez faire, c'est de ne pas inclure du tout le support checked dans le composant.

<Checkbox
    onChange={this.onChangeBox}
    value={i}>{i}
</Checkbox>

La case à cocher doit toujours cocher même si vous n'incluez pas l'hélice cochée. C'est un peu étrange, je sais.

Au lieu de cela, passez simplement la valeur dans la fonction onChangeBox et gérez toute votre logique et définissez une valeur d'état lors du changement.

Je viens de le tester et ça marche.

0
Nicholas Porter