web-dev-qa-db-ja.com

Antd React.jsでCheckbox.Groupをオフにする方法

https://ant.design/components/checkbox/ を使用し、チェックボックスがオンになっているときにオフにしようとする次のコードがあります。ボタンがクリックされた場合、すべてをチェックしたくないので、すべてのチェックを外すか、1つのチェックボックスをオンにします。

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>

        )
    }

どんな助けでも感謝します！

javascriptreactjsantdant-design-pro
3
Mandoxsy

mapを使用して動的にチェックボックスを生成する場合、状態を使用してチェックされた値を追跡するのは難しいでしょう。これを行うべきではありません。

あなたがすべきことは、コンポーネントにcheckedプロップをまったく含めないことです。

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

チェックされた小道具を含めなくても、チェックボックスはチェックするはずです。ちょっと変だと思います。

代わりに、値をonChangeBox関数に渡し、そこですべてのロジックを処理し、変更時に状態値を設定します。

私はそれをテストしたところ、うまくいきました。

0
Nicholas Porter