Input & DropDown 拼接成 select组件（基于antd和react）

前言：为什么不直接用select，还要舍近求远搞input+dropdown这种缝合怪，是因为antd的select不支持选中项再编辑，效果如图

比如：选中的lucy文案变成了placeholder不能再编辑了

封装此组件虽然比较简单，但还是有弊端的，就是失去了select自带的上下键选中下拉项的功能

一、组件代码

import React, { useState, useRef, useEffect } from 'react';  
import { Dropdown, Menu, Input } from 'antd';  
import { DownOutlined } from '@ant-design/icons';  

	  
const CustomSelect = (props) => {  
      //可用props参数将方法抛出去供外部父组件使用
      const {pressEnter} = props;//例如：抛出回车事件

	  const [value, setValue] = useState('');  
	  const [options, setOptions] = useState(['洋芋果果', '测试1号', '测试2号']);  
	  const [open, setOpen] = useState(false);  

	  // 下拉菜单隐藏可见 
      const handleDropdown = (flag) => {  
	    setOpen(flag);  
	  };  
      //选中下拉项
      const handleMenu = (item,key)=>{
        setValue(item.props.label);
        setOpen(false);
      }  


	  return (  
	    <Dropdown  
	      overlay={
            <Menu
               onClick={handleMenu} 
            >
                {options.map((option, index) => (  
                    <Menu.Item key={option}>  
                        {option}  
                     </Menu.Item>  
                ))}
            </Menu>
          }  
	      trigger={['click']}  
	      visible={open}  
	      onVisibleChange={handleDropdown}  
	      getPopupContainer={() => dropdownRef.current}  
	    >  

	      <Input  
	        value={value}  
	        placeholder="请选择"  
	        suffix={<DownOutlined />}  
            onChange={(e)=>{ 
                setValue(e.target.value);
            }}
            onPressEnter={pressEnter}
	      />  
	    </Dropdown>  
	  );  
	};  

	 
	export default CustomSelect;

二、调用组件

import React from 'react';  
import CustomSelect from './CustomSelect'; // 导入自定义下拉组件  

	  
const App = () => {  
   return (  
	    <div>  
	      <CustomSelect pressEnter={(e)=>{
            console.log(e,"回调参数")
          }}/> 
	    </div>  
	  );  
  };  

export default App;