使用antd中Transfer穿梭框实现小组成员的增删

穿梭框左边栏为未分组的学生，右边栏为该小组学生， 选择左边学生移进右边即为添加学生到该组，右边移入左边即为从组中删除学生（可以选择多个学生进行操作）

实现的效果如下：

首先要对得到的数据进行处理，使得mockData中的数据为未分组的学生和该小组下已有的学生，targetKeys为mockData中已分组学生的key，从而保证穿梭框中显示的结果为左边为未分组的学生，右边为该该小组下的学生。（具体的数据处理过程以实际数据为准）

getMock = () => {
    const { ClassManagementModel: { studentData, divisionMember }, DataId } = this.props;
    console.log(DataId);  // 所点击小组划分下的数据
    console.log(divisionMember); // 该划分下所有小组已经分组的成员
    const targetKeys = [];
    const mockData = [];

    // divisionMember中去除DataId对应的数据
    const filteredMember = divisionMember.filter(name => !DataId.userList.some(item => item.username === name));
    console.log(filteredMember);

    // 去掉filteredMember中的名字
    const filteredStudentList = Object.values(studentData.list)
      .filter(student => !filteredMember.includes(student.realName));

    console.log(filteredStudentList);

    filteredStudentList.forEach((student, index) => {
      console.log(student);
      student.key =index.toString()
      mockData.push(student)
      if (DataId.userList.some(item => item.username === student.realName)) {
        targetKeys.push(student.key);
      }
    });

    console.log(mockData);
    console.log(targetKeys);
    this.setState({
      mockData,
      targetKeys,
    });
  };

  filterOption = (inputValue, option) => option.realName.indexOf(inputValue) > -1;

  handleChange = (nextTargetKeys, direction, moveKeys) => {
    console.log('targetKeys: ', nextTargetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
    this.setState({
      targetKeys: nextTargetKeys ,
      direction:direction,
      moveKeys:moveKeys
    });
  };

  handleSearch = (dir, value) => {
    console.log('search:', dir, value);
  };

 点击提交时，根据direction的方向来得到是添加还是删除学生，然后调用对应的接口

  handleMockSubmit=()=>{
    const {dispatch, DataId,groupId, pagination} = this.props;
    const { direction, moveKeys,mockData } = this.state;
    console.log(direction, moveKeys);
    const selectedData = mockData.filter(item => moveKeys.includes(item.key));
    console.log(selectedData);
    console.log();
    switch (direction){
      case 'left':  // 删除学生
        console.log(1111);
        dispatch({
          type: 'ClassManagementModel/delDivisionMember',
          payload: {
            data: {
              groupId:groupId,
              selectedData
            },
            pagination
          }
        })
        break;

      case 'right':  // 添加学生
        console.log(2222);
        dispatch({
          type: 'ClassManagementModel/addDivisionMember',
          payload: {
            data: {
              divisionId:DataId.divisionId,
              groupId:groupId,
              selectedData
            },
            pagination
          }
        })
        break;

      default:
        break;

    }
  }

 调用此组件：

<Transfer
   listStyle={{
     width: 250,
     height: 300,
   }}
   dataSource={mockData}
   showSearch
   filterOption={this.filterOption}
   targetKeys={targetKeys}
   onChange={this.handleChange}
   onSearch={this.handleSearch}
   render={item => item.realName}
/>

 API属性如下：

参考文档：

antd官网