react antd select下拉框选中一个值后变为输入框

在Ant Design的Select组件中，可以使用mode属性来设置下拉框的模式。默认情况下，mode属性的值为 "default"，表示下拉框只能选择预设的选项。如果将mode属性的值设置为 "tags"，则可以在下拉框中输入自定义的选项。

以下是一个示例代码：

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

const { Option } = Select;

const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
];

function Demo() {
  const [value, setValue] = useState([]);

  function handleChange(value) {
    setValue(value);
  }

  return (
    <Select
      mode="tags"
      style={{ width: "100%" }}
      placeholder="Please select"
      value={value}
      onChange={handleChange}
    >
      {options.map((option) => (
        <Option key={option.value} value={option.value}>
          {option.label}
        </Option>
      ))}
    </Select>
  );
}

export default Demo;

在上面的代码中，我们将Select的mode属性设置为 "tags"，并且在handleChange函数中更新了组件的值。当用户选择一个预设的选项时，组件的值会变为该选项的值。当用户输入一个自定义的选项时，组件的值会变为输入框中的文本。