Material UI CheckboxGroup封装

Material Ui 中只有单个的Checkbox组件,如果需要用到一组checkbox的话,处理起来就会相对麻烦,下面就封装一个CheckboxGroup组件方便使用

import React from 'react';
import Checkbox from 'material-ui/Checkbox';

class CheckboxGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data
        }
    }

    handleChange = (name, index) => event => {
        let {data} = this.state;
        let {onChange} = this.props;
        data[index].checked = event.target.checked;
        this.setState({
            data: data
        }, () => {
            let checkedValues = [];
            this.state.data.forEach(item => {
                if (item.checked) {
                    checkedValues.push(item.value);
                }
            });
            onChange(checkedValues);
        });
    };

    render () {
        return (
            <div className="checkbox-group">
                {
                    this.state.data.map((checkbox, index) => {
                        return (
                            <Checkbox
                                key={index}
                                checked={checkbox.checked}
                                onChange={this.handleChange('checkedA', index)}
                                value={checkbox.value}
                            />
                        )
                    })
                }
            </div>
        )
    }
}

export default CheckboxGroup;

使用方式

/**
 * Created by wxw on 18-4-24.
 */
import React from 'react';
import CheckboxGroup from './toolComponent/CheckboxGroup';

class FormTest extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checkboxData: [
                {
                    checked: false,
                    value: 'checkA'
                },
                {
                    checked: false,
                    value: 'checkB'
                },
                {
                    checked: false,
                    value: 'checkF'
                }
            ]
        };
    }

    handleCheckboxGroup = (checkedValues) => {
        console.log(checkedValues); //获取所有选中的值
    };

    render() {
        const {checkboxData} = this.state;
        return (
            <div>
                <CheckboxGroup onChange={this.handleCheckboxGroup} data={checkboxData} />
            </div>
        );
    }
}

export default FormTest;