react中antd/select下拉框可单选可自定义输入

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

const { Option } = Select;
const arr = [1, 2, 3, 4, 5];

export default function index() {
  const [selectValue, setSelectValue] = useState([undefined]);

  const changeHandle = (value) => {
    console.log(value, 'value-change');
    setSelectValue([value]);
  };

  const searchHandle = (value) => {
    if (value) {
      console.log(value, 'value-search');
      setSelectValue([value]);
    }
  };

  const blurHandle = () => {
    console.log(selectValue, 'selectValue-blur');
    changeHandle(selectValue[0]);
  };

  return (
    <div>
      <Select
        allowClear
        showSearch
        showArrow
        placeholder="请选择"
        onChange={changeHandle}
        onSearch={searchHandle}
        onBlur={blurHandle}
        style={{ width: 300 }}
        value={selectValue[0]}
      >
        {arr.map((item, index) => (
          <Option key={index} value={item}>
            {item}
          </Option>
        ))}
      </Select>
    </div>
  );
}