react实现下拉选择
React 实现下拉选择的方法
使用原生 HTML select 标签
在 React 中可以直接使用原生 HTML 的 select 标签结合 state 管理选中值：
import React, { useState } from 'react';
function NativeSelect() {
const [selectedValue, setSelectedValue] = useState('');
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
return (
<select value={selectedValue} onChange={handleChange}>
<option value="">请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
);
}使用第三方库 react-select
react-select 是一个功能丰富的下拉选择组件库：
import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
];
function ReactSelect() {
const [selectedOption, setSelectedOption] = React.useState(null);
return (
<Select
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
/>
);
}自定义下拉组件
如果需要完全自定义样式和行为，可以手动实现：
import React, { useState, useRef, useEffect } from 'react';
function CustomSelect({ options }) {
const [isOpen, setIsOpen] = useState(false);
const [selectedOption, setSelectedOption] = useState(null);
const dropdownRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
return (
<div className="custom-select" ref={dropdownRef}>
<div
className="select-header"
onClick={() => setIsOpen(!isOpen)}
>
{selectedOption ? selectedOption.label : '请选择'}
</div>
{isOpen && (
<div className="select-options">
{options.map(option => (
<div
key={option.value}
className="select-option"
onClick={() => {
setSelectedOption(option);
setIsOpen(false);
}}
>
{option.label}
</div>
))}
</div>
)}
</div>
);
}多选下拉实现
react-select 也支持多选功能：
import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
];
function MultiSelect() {
const [selectedOptions, setSelectedOptions] = React.useState([]);
return (
<Select
isMulti
value={selectedOptions}
onChange={setSelectedOptions}
options={options}
/>
);
}注意事项
- 确保为每个选项设置唯一的 key 或 value
- 考虑添加禁用状态处理
- 移动端体验需要特别优化
- 可访问性（ARIA 属性）对于屏幕阅读器用户很重要
以上方法涵盖了从简单到复杂的不同实现方案，可以根据项目需求选择合适的实现方式。
