使用React和Material UI访问列表中所选项目的索引可以通过以下步骤实现:
import React, { useState } from 'react';
import { List, ListItem, ListItemText } from '@material-ui/core';
const [selectedIndex, setSelectedIndex] = useState(null);
const handleListItemClick = (event, index) => {
setSelectedIndex(index);
};
<List component="nav">
<ListItem
button
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemText primary="项目1" />
</ListItem>
<ListItem
button
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
<ListItemText primary="项目2" />
</ListItem>
{/* 添加更多项目 */}
</List>
通过以上步骤,你可以使用React和Material UI来访问列表中所选项目的索引。当用户点击列表中的项目时,selectedIndex状态变量会更新为所选项目的索引,你可以根据这个索引来执行相应的操作。
领取专属 10元无门槛券
手把手带您无忧上云