自定义antd 穿梭框Transfer的搜索事件，搜索时使用后端接口进行搜索

相关代码参考：穿梭框 Transfer - Ant Design

业务场景：

以上截图为例，用户搜索时输入： " content2 content4" 也能搜索出相应数据，并供用户选择。

实现方案：

不使用组件自带搜索方式，调用后端接口获取响应数据进行展示

代码实现（对antd穿梭框代码进行改造）：

antd穿梭框代码：穿梭框 Transfer - Ant Design

改造后(只需更改filterOption和onSearch相关代码)，具体实现请阅读以下代码

import React, { useEffect, useState } from "react";
import "./index.css";
import { Transfer } from "antd";
import type { TransferDirection } from "antd/es/transfer";

interface RecordType {
  key: string;
  title: string;
  description: string;
  chosen: boolean;
}

const App: React.FC = () => {
  const [mockData, setMockData] = useState<RecordType[]>([]);
  const [targetKeys, setTargetKeys] = useState<string[]>([]);

  const getMock = () => {
    const tempTargetKeys = [];
    const tempMockData = [];
    for (let i = 0; i < 20; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        chosen: i % 2 === 0
      };
      if (data.chosen) {
        tempTargetKeys.push(data.key);
      }
      tempMockData.push(data);
    }
    setMockData(tempMockData);
    setTargetKeys(tempTargetKeys);
  };

  useEffect(() => {
    getMock();
  }, []);

  const filterOption = (inputValue: string, option: RecordType) => {
    // 完全使用后端返回结果进行展示，不使用组件自带搜索
    return true;
  };

  const handleChange = (newTargetKeys: string[]) => {
    setTargetKeys(newTargetKeys);
  };

  const handleSearch = (dir: TransferDirection, value: string) => {
      console.log("search:", dir, value);
      /* 用户输入的场景是多个name 会以空格分隔进行搜索，但后端接口传参要求以逗号分隔，所以需转为 
       `,`分隔在对后端进行传参*/
      const inputStr = value.split(" ").join(",");
      console.log(inputStr); 
      // 以下代码为后端接口调用并重新set datasource的值,在这模拟一下结果
      setTimeout(() => {
        const resData = [
          {
            key: "1",
            title: `content2`,
            description: `description of content2`,
            chosen: false
          },
          {
            key: "3",
            title: `content4`,
            description: `description of content4`,
            chosen: false
          }
        ];
        setMockData(resData);
      }, 500);
  };

  return (
    <Transfer
      dataSource={mockData}
      showSearch
      filterOption={filterOption}
      targetKeys={targetKeys}
      onChange={handleChange}
      onSearch={handleSearch}
      render={(item) => item.title}
    />
  );
};

export default App;