怎么解决在react中用antd的select组件mode为tags时，解决输入重复选项按回车键都删除的问题

Question

在react中，用antd的select下拉框组件，mode为tags时，输入重复的选项按回车键就会将两个选项都删除，如果想再次输入重复选项时不想都删除，该怎么写

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

要解决在React中使用Ant Design的Select组件时，mode为tags的情况下输入重复选项并按回车键导致所有重复选项被删除的问题，可以通过自定义组件的逻辑来实现。以下是具体的解决方案和代码示例：

解决方案

1. 监听输入变化：通过监听Select组件的onChange事件，获取用户输入的值。
2. 检查选项是否已存在：在添加选项之前，使用数组方法检查该值是否已存在于选项数组中。
3. 添加或更新选项：如果该值不存在，则将其添加到选项数组中，并更新Select组件的状态。如果该值已存在，则不进行任何操作。

代码示例

import React, { useState } from 'react';
import { Select } from 'antd';

const App = () => {
  const [value, setValue] = useState([]);

  const onChange = (newValue) => {
    // 检查新值是否已存在于选项中
    const isExist = value.some(item => item === newValue);
    if (!isExist) {
      // 如果不存在，则添加新值
      setValue([...value, newValue]);
    }
  };

  const onBlur = () => {
    // 可以在这里处理一些失去焦点时的逻辑
  };

  const onSearch = (searchValue) => {
    // 可以在这里处理搜索逻辑
  };

  return (
    <Select
      mode="tags"
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      onSearch={onSearch}
      style={{ width: '100%' }}
    >
      {value.map(item => (
        <Select.Option key={item} value={item}>
          {item}
        </Select.Option>
      ))}
    </Select>
  );
};

export default App;

代码解释

• useState：使用React的useState钩子来管理选项数组的状态。
• onChange：当用户选择或输入选项时，触发此函数。通过检查新值是否已存在于选项数组中，决定是否添加新值。
• onBlur：当Select组件失去焦点时触发此函数，可以在这里处理一些逻辑。
• onSearch：当用户输入搜索内容时触发此函数，可以在这里处理搜索逻辑。

注意事项

• 确保每个选项的值是唯一的，这样可以避免在添加选项时产生冲突。
• 根据实际需求，可能需要在添加选项之前进行一些额外的验证或处理。

通过这种方式，你可以控制用户输入的选项，避免重复添加，同时允许用户输入重复的选项而不被删除。