ant design select下拉组件，不选择内容，input的值会被自动清空？

Question

问题描述

代码如下：

在线测试代码： https://codesandbox.io/s/sou-...

代码如下：

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

const SearchInput = (props) => {
  const [data, setData] = useState([
    {
      value: "value1",
      label: "value1"
    },
    {
      value: "value2",
      label: "value2"
    }
  ]);
  const [value, setValue] = useState();

  const handleSearch = (newValue) => {
    console.log(newValue, "xz1122");
    window.customNewValue = newValue;
    setValue(newValue);
  };

  const handleChange = (newValue) => {
    setValue(newValue);
  };

  const options = data.map((d) => <Option key={d.value}>{d.text}</Option>);

  console.log(value, window.customNewValue, "xz1111");
  return (
    <Select
      showSearch
      value={value}
      style={props.style}
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange}
      optionLabelProp={"children"}
      notFoundContent={null}
      onBlur={() => {
        // 此时的value已经变成空了
        console.log(value, "xz555");
      }}
    >
      {options}
    </Select>
  );
};

const App = () => (
  <SearchInput
    placeholder="input search text"
    style={{
      width: 200
    }}
  />
);

export default App;

Answer 1

你可能想要的是AutoComplete

Answer 2

写了改写了改，真不知道说什么好了。不能因为选项搜索功能用到了input框，你就认为那就是一个input吧...
你如果想让用户可以添加选项就在select后面做一个添加按钮就行了，要不就别用antd的select自己写一个，你现在想让人家写的组件按你的思路运行，这事不科学啊。

楼上厉害，auto complete被描述成下拉框...我也是醉了。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

这个需求，使用AutoComplete是最方便，但其实也是可以用 Select组件改成上面的功能；
从源码可以看出，AutoComplete 其实是直接引用的Select组件进行的二次封装，Api都是一样的（只是ant design 官网上关于AutoComplete的参数不全，大家可以看下typescript的定义）
https://github.com/ant-design...

这是修改后的代码：https://codesandbox.io/s/sou-...

核心修改点就是增加一个中间数组 arr, 当触发失焦事件时（包括：点击空白区域，选择option项），默认会触发组件的onSearch事件，并且返回的参数value为空。
当触发onBlur事件后，取出arr中倒数第2个值重新赋值给value就可以了。

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

// 注意这里的arr要放在组件外面
let arr = [];
const SearchInput = (props) => {
  const [data, setData] = useState([
    {
      value: "value11",
      label: "value11"
    },
    {
      value: "value2",
      label: "value2"
    }
  ]);
  const [value, setValue] = useState();

  const handleSearch = (newValue) => {
    arr.push(newValue);
    setValue(newValue);
  };

  const handleChange = (newValue) => {
    setValue(newValue);
  };

  const options = data.map((d) => <Option key={d.value}>{d.text}</Option>);

  console.log(value, arr, "xz1111");
  return (
    <Select
      showSearch
      // value={value}
      style={props.style}
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange}
      searchValue={value}
      optionLabelProp={"children"}
      notFoundContent={null}
      onBlur={() => {
        // 此时的value已经变成空了
        if (arr.length > 1) {
          setValue(arr[arr.length - 2]);
        }
      }}
    >
      {options}
    </Select>
  );
};

const App = () => (
  <SearchInput
    placeholder="input search text"
    style={{
      width: 200
    }}
  />
);

export default App;