爱站长工具,重庆建设厅的网站首页,拱墅网站建设,浏览器无法上网但有网前言#xff1a;为什么不直接用select#xff0c;还要舍近求远搞inputdropdown这种缝合怪#xff0c;是因为antd的select不支持选中项再编辑#xff0c;效果如图
比如#xff1a;选中的lucy文案变成了placeholder不能再编辑了 封装此组件虽然比较简单#xff0c;但还是有…前言为什么不直接用select还要舍近求远搞inputdropdown这种缝合怪是因为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{MenuonClick{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;
