react实现下拉列表
使用原生HTML实现基础下拉列表
在React中可以直接使用HTML的<select>和<option>标签创建基础下拉列表。通过value和onChange属性绑定状态管理选中的值。
import { useState } from 'react';
function Dropdown() {
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>
</select>
);
}动态渲染下拉选项
通过数组动态生成<option>，适合选项数据来自API或动态变化的场景。
const options = [
{ id: 1, label: '苹果' },
{ id: 2, label: '香蕉' }
];
function DynamicDropdown() {
const [selectedId, setSelectedId] = useState('');
return (
<select
value={selectedId}
onChange={(e) => setSelectedId(e.target.value)}
>
<option value="">选择水果</option>
{options.map(item => (
<option key={item.id} value={item.id}>
{item.label}
</option>
))}
</select>
);
}使用第三方库增强功能
如需支持搜索、多选等高级功能，可集成react-select等流行库。
安装依赖：
npm install react-select示例代码：
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: '巧克力' },
{ value: 'strawberry', label: '草莓' }
];
function EnhancedDropdown() {
const [selectedOption, setSelectedOption] = useState(null);
return (
<Select
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
placeholder="选择口味"
/>
);
}自定义样式与行为
通过CSS或内联样式覆盖默认外观，或通过onBlur、onFocus等事件添加交互逻辑。
<select
style={{
padding: '8px',
borderRadius: '4px',
border: '1px solid #ccc'
}}
onFocus={() => console.log('聚焦')}
>
{/* 选项内容 */}
</select>无障碍支持
添加aria-label和aria-labelledby属性提升可访问性。
<select
aria-label="水果选择器"
aria-labelledby="fruit-label"
>
<span id="fruit-label">选择水果</span>
{/* 选项内容 */}
</select>
