React实战(6)——复选框多选组件

1、需求描述

image.png

• 由于需求要求实现一个三种状态的复选功能，分别为未选中(value=0)、且选中(value=1)、或选中(value=2)，交互原理和checkbox选框类似
• 切换健康服务类型时缺失信息内容选项会被替换且置未选中状态
• /userlist?healthType=1&subType=1&checkArry=[0,1,2,0,0,0,0],从其它页面跳入初始化查询条件
• 需要准备三种状态的icon图

2、父组件 UserList.js

import CheckboxMulti from '@/components/CheckboxMulti';
const ownerList = [
  {
    value: 0,
    label: '性别',
  },
  {
    value: 0,
    label: '年龄',
  },
  {
    value: 0,
    label: '身高',
  },
  {
    value: 0,
    label: '体重',
  },
  {
    value: 0,
    label: '体质',
  },
  {
    value: 0,
    label: '心理测试',
  },
  {
    value: 0,
    label: '体检信息',
  },
];
const remindList = [
  {
    value: 0,
    label: '体质测试',
  },
  {
    value: 0,
    label: '生活习惯',
  },
  {
    value: 0,
    label: '心理测试',
  },
  {
    value: 0,
    label: '体检',
  },
  {
    value: 0,
    label: '体重',
  },
  {
    value: 0,
    label: '血压值',
  },
];
class UseList extends PureComponent {
  state = {
    checkboxOwnerList: ownerList,
    checkboxRemindList: remindList,
    checkboxCheckArry: [0, 0, 0, 0, 0, 0, 0, 0],
    healthyServiceType: undefined,
  }
  componentDidMount() {
    const {
      location: {
        query: {
          healthType,
          subType,
          checkArry,
        },
      },
    } = this.props;
    const {
      checkboxOwnerList,
      checkboxRemindList,
    } = this.state;
    if (healthType && healthType === '1') {
      const tempList = deepClone(checkboxOwnerList);
      if (subType === '1') {
        tempList.forEach((item, index) => {
          if (index < 4) {
            item.value = 2;
          }
        });
      } else if (subType > 1 && subType < 6) {
        tempList[Number(subType) + 2].value = 1;
      }
      this.setState(
        {
          healthyServiceType: '1',
          checkboxOwnerList: tempList,
          checkboxCheckArry: JSON.parse(checkArry),
        },
        () => {
          this.initData();
        },
      );
    } else if (healthType && healthType === '2') {
      const tempList = deepClone(checkboxRemindList);
      tempList[subType - 1].value = 1;
      this.setState(
        {
          healthyServiceType: '2',
          checkboxRemindList: tempList,
          checkboxCheckArry: JSON.parse(checkArry),
        },
        () => {
          // 表格列表查询
          this.initData();
        },
      );
    } else {
      this.initData();
    }
  }

  changeOwnerCheck = list => {
    // deepClone是深拷贝方法，防止数据改变render不执行
    const tempList = deepClone(list);
    this.setState(
      {
        checkboxOwnerList: tempList,
      },
      () => {
        this.state.checkboxCheckArry = [];
        this.state.checkboxOwnerList.forEach(item => {
          this.state.checkboxCheckArry.push(item.value);
        });
      },
    );
  };

  changeRemindCheck = list => {
    const tempList = deepClone(list);
    this.setState(
      {
        checkboxRemindList: tempList,
      },
      () => {
        this.state.checkboxCheckArry = [];
        this.state.checkboxRemindList.forEach(item => {
          this.state.checkboxCheckArry.push(item.value);
        });
      },
    );
  };

  render() {
    const {
      checkboxOwnerList,
      checkboxRemindList,
      healthyServiceType,
    } = this.state;
    return (
      <div>
        <FormItem label="健康服务类型">
          {getFieldDecorator('healthyServiceType', {
            initialValue: healthyServiceType,
          })(
            <Select
              placeholder="请选择"
              style={{ width: '100%' }}
              showSearch
              onChange={this.healthOnChange}
            >
              <Option value="1">补充业主信息</Option>
              <Option value="2">提醒更新信息</Option>
            </Select>,
          )}
        </FormItem>
        <div></div>
        <FormItem style={{ display: healthyServiceType === '1' ? '' : 'none' }} label="缺失信息">
          <CheckboxMulti
            checkboxList={checkboxOwnerList}
            changeCheck={this.changeOwnerCheck}
          ></CheckboxMulti>
        </FormItem>
        <FormItem style={{ display: healthyServiceType === '2' ? '' : 'none' }} label="过期信息">
          <CheckboxMulti
            checkboxList={checkboxRemindList}
            changeCheck={this.changeRemindCheck}
          ></CheckboxMulti>
        </FormItem>
      </div>
    )
  }
}

3、子组件CheckboxMulti.js

import React, { PureComponent } from 'react';
import select0 from '@/assets/select_0.png';
import select1 from '@/assets/select_1.png';
import select2 from '@/assets/select_2.png';
import styles from './index.less';

import { deepClone } from '@/utils/utils';

class CheckboxMulti extends PureComponent {
  changeStatus = index => {
    const { checkboxList, changeCheck } = this.props;
    const tempList = deepClone(checkboxList);
    let tempIndex = 0;
    // 0 - 未选中， 1 - 且选中， 2 - 或选中
    if (checkboxList[index].value === 0) {
      tempIndex = 1;
    } else if (checkboxList[index].value === 1) {
      tempIndex = 2;
    } else if (checkboxList[index].value === 2) {
      tempIndex = 0;
    }
    tempList[index].value = tempIndex;
    changeCheck(tempList);
  };

  imgFilter = value => {
    let src = select2;
    if (value === 0) {
      src = select0;
    } else if (value === 1) {
      src = select1;
    }
    return src;
  };

  render() {
    const { checkboxList } = this.props;
    return (
      <div className={styles.list}>
        {checkboxList.map((item, index) => (
          <span className={styles.item} key={item.label}>
            <img src={this.imgFilter(item.value)} onClick={() => this.changeStatus(index)} alt="" />
            <i>{item.label}</i>
          </span>
        ))}
      </div>
    );
  }
}

export default CheckboxMulti;

• index.less

.list {
  display: flex;
  align-items: center;
  .item {
    margin-right: 8px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 40px;
    img {
      width: 16px;
      height: 16px;
    }
    i {
      margin: 0 8px 0 5px;
      font-style: normal;
    }
  }
}