封装antd switch-group

效果：

代码：

import React from 'react'
import { Switch } from 'antd'

/**
 * switch group 
 * @param {*} object
 *  @oarams func onChange 变化回调
 *  @oarams array dataSource 数据集
 *  @oarams array value 默认值
 *  @oarams string key 主键
 */
const SwitchGroup = ({ onChange, dataSource, value, key }) => {
    const switchChange = (type, preValueArr, val) => {
        let resultArr = preValueArr
        if (val) {
            resultArr.push(type)
        } else {
            preValueArr.includes(type) && resultArr.splice(resultArr.indexOf(type), 1)
        }
        onChange(resultArr);
    }
    let switchTmp = [];
    dataSource.map((item, index) => {
        let isChecked = value.includes(item[key]);
        switchTmp.push(<Switch
            key={"switch" + index}
            style={{ margin: "0 4px" }}
            checkedChildren={item.name}
            unCheckedChildren={item.name}
            onChange={switchChange.bind(this, item[key], value)}
            checked={isChecked}
        />);
    });
    return switchTmp;
}
export default SwitchGroup;

使用：

<Form.Item label="作品标签" required>
    <RenderSwitch value={projectTags} dataSource={tags} onChange={this.handleSwitchChange} key="id" />
</Form.Item>

作用：

数据集格式完全可以使用select数据格式，对于数据量较少的多选来说较为美观