React js 点击输入框其它位置隐藏下拉框

### 实现 React 中的可编辑下拉框组件 在 React 中创建一个可编辑的下拉框组件可以通过组合 `input` 和 `select` 的功能来完成。这种类型的组件通常允许用户通过输入字段手动输入值，或者从预定义选项列表中选择值。 以下是基于已有引用内容以及专业知识构建的一个解决方案： #### 组件设计思路 为了实现这一目标，可以利用 React 的状态管理机制 (`useState`) 来跟踪当前选中的值和用户的输入值。此外，还可以借助第三方库 Ant Design (antd)，它提供了丰富的 UI 组件支持，简化开发过程[^3]。 下面是一个简单的例子展示如何制作这样的组件： ```javascript import React, { useState } from 'react'; const EditableDropdown = ({ options }) => { const [value, setValue] = useState(''); const [isEditing, setIsEditing] = useState(false); const handleInputChange = (e) => { setValue(e.target.value); }; const handleSelectChange = (e) => { setValue(e.target.value); setIsEditing(false); // 关闭编辑模式 }; const toggleEditMode = () => { setIsEditing(!isEditing); }; return ( <div style={{ display: 'inline-block', position: 'relative' }}> {!isEditing ? ( <button onClick={toggleEditMode} style={{ width: '100%' }}> {value || '请选择'} </button> ) : ( <> <input type="text" value={value} onChange={handleInputChange} onBlur={toggleEditMode} style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }} /> <ul style={{ border: '1px solid #ccc', listStyleType: 'none', padding: 0 }}> {options.map((option) => ( <li key={option.value} onClick={() => handleSelectChange({ target: { value: option.label } })} style={{ cursor: 'pointer', padding: '8px', backgroundColor: value === option.label ? '#f0f0f0' : 'white' }} > {option.label} </li> ))} </ul> </> )} </div> ); }; export default EditableDropdown; ``` 此代码片段展示了如何动态切换输入框与下拉菜单之间的交互逻辑，并且能够处理自定义输入或从固定选项集中选取数据的功能[^2]。 如果希望进一步增强用户体验，则可以考虑集成 antd 提供的相关控件，比如 `<AutoComplete>` 或者扩展版的 `<Select>` 部件，它们内置了许多实用特性如自动补全、异步加载远程数据源等功能。 --- ###