React 之antd Checkbox.Group 组，onchange事件及赋值

每个人的需求不一样，因此功能也会不一样，在此记录了项目中的Checkbox.Group组，新增了清空所有组的复选框，通过阅读文档，可以修改对应的value值达到清空的效果

onChange变化时需要把更新value的值，来对应匹配勾选中的复选框；

清空时也需要将value值置空，空数组及可

{Object.keys(filterConfig).map((key) => {
          return (
            <div key={key}>
              <div className="filter-title">{filterConfig[key].title}</div>
              <div className="filter-box">
                <Checkbox.Group
                  value={filtersProps && filtersProps[key] ? filtersProps[key] : []}
                  style={{ width: '100%' }}
                  onChange={(checkedValues) => {
                    this.onChange(checkedValues, key);
                  }}
                >
                  {filterConfig[key].list.map((item, index) => {
                    return (
                      <Row key={item.section} style={{ marginBottom: '8px' }}>
                        <Col span={18} offset={2}>
                          <Checkbox value={index}>
                            <span style={{ color: '#404040' }}>{item.section}</span>
                          </Checkbox>
                        </Col>
                        <Col span={4}>
                          <div className="filter-count">{FilterResult[key][index]}</div>
                        </Col>
                      </Row>
                    );
                  })}
                </Checkbox.Group>
              </div>
            </div>
          );
        })}

 onChange = (checkedValues, key) => {
    const filters = {};
    const filterValues = {};
    console.log(111, checkedValues, key);
    // eslint-disable-next-line array-callback-return
    Object.keys(filterConfig).map((keys) => {
      if (keys === key) {
        const filterLength = filterConfig[key].list.length;
        const arr2 = new Array(filterLength).fill(0);
        checkedValues.forEach((element) => {
          arr2[element] = 1;
        });
        filters[keys] = arr2;
        filterValues[keys] = checkedValues;
        this.props.onFilterCard(filters, filterValues);
      }
    });
  };

onFilterCard = (filters, filterValues) => {
    this.props.updateInfo({
      loading: true,
      filters: {
        ...this.props.TaskDetail.filters,
        ...filterValues,
      },
    });
    this.props.GetMoleculeDetail({
      ...this.props.TaskDetail.query,
      filters: {
        ...this.props.TaskDetail.query.filters,
        ...filters,
      },
    });
  };