Material-UI TreeView是一个用于展示树形结构数据的UI组件。要获取被点击的TreeItem的nodeId,可以通过以下步骤实现:
以下是一个示例代码:
import React from 'react';
import { TreeView, TreeItem } from '@material-ui/lab';
const MyTreeView = () => {
const handleItemClick = (event) => {
const nodeId = event.currentTarget.getAttribute('data-nodeid');
console.log('Clicked TreeItem nodeId:', nodeId);
};
return (
<TreeView>
<TreeItem nodeId="1" label="Node 1" onClick={handleItemClick}>
<TreeItem nodeId="2" label="Node 1.1" onClick={handleItemClick} />
<TreeItem nodeId="3" label="Node 1.2" onClick={handleItemClick} />
</TreeItem>
<TreeItem nodeId="4" label="Node 2" onClick={handleItemClick} />
</TreeView>
);
};
export default MyTreeView;
在上述示例中,每个TreeItem都设置了一个唯一的nodeId属性,并且通过onClick事件处理函数handleItemClick来捕获TreeItem的点击事件。在handleItemClick函数中,使用event.currentTarget.getAttribute('data-nodeid')来获取被点击的TreeItem的nodeId,并打印到控制台上。
这样,当用户点击任何一个TreeItem时,你就可以获取到被点击的TreeItem的nodeId,并进行相应的处理。
关于Material-UI TreeView的更多信息和使用方法,你可以参考腾讯云的相关产品文档:Material-UI TreeView。
领取专属 10元无门槛券
手把手带您无忧上云