react 如何实现点击列表
实现点击列表的方法
在React中实现点击列表功能通常涉及以下几个关键步骤：
创建列表组件
使用map方法遍历数据数组生成列表项，确保每个列表项具有唯一的key属性：
const items = ['Item 1', 'Item 2', 'Item 3'];
function List() {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}添加点击事件处理
为列表项添加onClick事件处理器，通常需要结合状态管理：
function List() {
const [selectedItem, setSelectedItem] = useState(null);
return (
<ul>
{items.map((item, index) => (
<li
key={index}
onClick={() => setSelectedItem(item)}
style={{
backgroundColor: selectedItem === item ? 'lightblue' : 'white'
}}
>
{item}
</li>
))}
</ul>
);
}处理复杂数据结构 当列表项包含复杂对象时，建议传递整个对象而非索引：
const items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
];
function List() {
const handleClick = (item) => {
console.log('Selected:', item);
};
return (
<ul>
{items.map(item => (
<li key={item.id} onClick={() => handleClick(item)}>
{item.name}
</li>
))}
</ul>
);
}优化性能 对于大型列表，使用React.memo避免不必要的渲染：
const MemoizedListItem = React.memo(function ListItem({ item, onClick }) {
return <li onClick={() => onClick(item)}>{item.name}</li>;
});
function List() {
const handleClick = (item) => {
// 处理点击逻辑
};
return (
<ul>
{items.map(item => (
<MemoizedListItem
key={item.id}
item={item}
onClick={handleClick}
/>
))}
</ul>
);
}添加无障碍支持 确保列表可被键盘导航，并添加ARIA属性：
<li
tabIndex="0"
role="button"
aria-pressed={selectedItem === item}
onKeyDown={(e) => e.key === 'Enter' && handleClick(item)}
>
{item.name}
</li>这些方法可以根据具体需求组合使用，构建出功能完善且用户体验良好的可点击列表组件。
