React中使用Ant Design Select组件实现onBlur自动选中新增项

要实现输入框失焦添加项后自动选中的效果，需要给Select组件补充选中状态的主动管理，具体实现步骤如下：

• 新增状态变量控制Select的选中项集合
• 给Select绑定value和onChange属性，关联选中状态
• 在输入框失焦事件中，同步更新选项数组与选中状态数组

修改后的完整代码：

import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;
const arr = ["1", "2", "3"];
const App = () => {
  const [data, setData] = useState(arr);
  // 新增状态管理Select的选中项
  const [selectedValues, setSelectedValues] = useState([]);

  const handleInputBlur = (e) => {
    const newValue = e.target.value.trim();
    if (!newValue) return; // 过滤空输入

    // 用函数式更新确保拿到最新状态
    setData(prevData => [...prevData, newValue]);
    // 将新值添加到选中集合
    setSelectedValues(prevSelected => [...prevSelected, newValue]);
    // 清空输入框
    e.target.value = "";
  };

  return (
    <>
      <Select
        mode="tags"
        size="large"
        placeholder="Please select"
        style={{ width: "100%" }}
        // 绑定选中值与状态更新函数
        value={selectedValues}
        onChange={setSelectedValues}
      >
        {data?.map((el) => (
          <Option key={el} value={el}>
            {el}
          </Option>
        ))}
      </Select>

      <input onBlur={handleInputBlur} />
    </>
  );
};

export default App;

关键说明： #

1. 选中状态绑定：通过value和onChange将Select的选中状态与selectedValues变量关联，实现对选中项的主动控制。
2. 失焦事件优化：添加空值过滤避免无效项，使用函数式更新状态确保操作基于最新的数组数据，最后清空输入框提升用户体验。
3. tags模式兼容：由于Select开启了mode="tags"，即使选项数组中未提前定义的项也能被选中，但这里先将新值加入选项数组再选中，保证选项列表与选中状态的一致性。

内容的提问来源于stack exchange，提问作者someone