react.js 如何二次封装antd Select组件加入穿梭框Transfer

react.js 如何二次封装antd Select组件加入穿梭框Transfer

效果如下

1.新增一个组件文件：ToMultiselect

import React, { Component } from 'react';
import { Modal, Transfer, message, Popover, Input, Card, Button } from 'antd';
import fetch from 'dva/fetch';
import { object2formdata } from '@/utils/utils';
import domain from '@/utils/domain-config';
import moment from 'moment';
class ToMultiselect extends React.Component {
  state = {
    mockData: [],
    targetKeys: [],
    mockDataCopy: {},
    mockDataCopyVal: '',
  };
  componentWillReceiveProps() {
    let { value, i, label, labelName, appIdList } = this.props;
    let mockData = [];
    let mockDataCopy = {};
    label && label.length > 0
      ? label.map((item, index) => {
          mockDataCopy[item[i]] = item[labelName];
          mockData.push({
            key: item[i],
            title: item[labelName],
            description: item[i],
            chosen: false,
          });
        })
      : null;
    this.setState({
      mockDataCopy,
      mockData,
    });
  }
  handleChange = targetKeys => {
    let { mockDataCopy } = this.state;
    let { title } = this.props;
    let mockDataCopyVal = '';
    if (targetKeys.length <= 1) {
      targetKeys.map(val => {
        mockDataCopyVal += mockDataCopy[val];
      });
    } else {
      mockDataCopyVal = `包括${targetKeys.length}项${title}`;
    }
    this.setState({ targetKeys, mockDataCopyVal });
    this.props.handleMultiData(targetKeys);
  };
  handleClearVal = () => {
    this.setState({
      targetKeys: [],
      mockDataCopyVal: '',
    });
    this.props.handleMultiData([]);
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    const { title } = this.props;
    let { mockDataCopy, mockDataCopyVal, targetKeys } = this.state;

    // 从左移入右时
    if (sourceSelectedKeys.length > 0) {
      if (targetKeys.length < 1) {
        sourceSelectedKeys.map(val => {
          mockDataCopyVal += mockDataCopy[val];
          targetKeys.push(val);
        });
      } else {
        sourceSelectedKeys.map(val => {
          mockDataCopyVal = `包括${targetKeys.length + 1}项${title}`;
          targetKeys.push(val);
        });
      }
    } else {
      // 从右移入左时
      if (targetKeys.length <= 1) {
        mockDataCopyVal = [];
        targetKeys = [];
      } else {
        targetKeys.forEach((item, i) => {
          if (item == targetSelectedKeys[0]) {
            targetKeys.splice(i, 1);
          }
        });
        if (targetKeys.length === 1) {
          mockDataCopyVal = mockDataCopy[targetKeys];
        } else {
          mockDataCopyVal = `包括${targetKeys.length}项${title}`;
        }
      }
    }
    this.props.handleMultiData(targetKeys);
    this.setState({
      targetKeys,
      mockDataCopyVal,
    });
  };
  handleFocusData = () => {
    const {mockDataCopyVal} = this.state
    const { appIdList } = this.props;
    this.setState({
      targetKeys: appIdList,
      mockDataCopyVal: appIdList.length > 0 ? mockDataCopyVal : '',
    });
  };
  render() {
    const { targetKeys, mockData, mockDataCopyVal } = this.state;
    const { appIdList } = this.props;
    const content = (
      <Transfer
        dataSource={mockData}
        showSearch
        listStyle={{
          width: 200,
          height: 300,
        }}
        titles={[
          '未选',
          <div onClick={this.handleClearVal} style={{ color: '#1890FF', cursor: 'pointer' }}>
            清空
          </div>,
        ]}
        onSelectChange={this.handleSelectChange}
        targetKeys={appIdList.length > 0 ? appIdList : []}
        onChange={this.handleChange}
        render={item => `${item.title}-${item.description}`}
      />
    );
    return (
      <Popover placement="bottom" content={content} trigger="click">
        <Input
          readOnly={true}
          onFocus={this.handleFocusData}
          onChange={this.props.handleMultiData}
          value={appIdList.length > 0 ? mockDataCopyVal : ''}
          style={{ marginBottom: '5px' }}
        />
      </Popover>
    );
  }
}
export default ToMultiselect;

2.引入

import ToMultiselect from '@/components/ToMultiselect';

3.调用

  handleMultiData(event) {
    this.props.form.setFieldsValue({ appIdList: event });
  }
  
   <ToMultiselect
        appIdList={appIdList}
        title="应用"
        handleMultiData={this.handleMultiData.bind(this)}
        labelName="appName"
        label={lvAppId}
        i="appKey"
        valueKey="appKey"
 />