React Material-UI の TreeView の event で TreeItem の nodeId が取りたいです

前提・実現したいこと

React Material-UI の TreeView で末端の TreeItem をクリックしたときに、クリックイベントで nodeId を取得したいです。

該当のソースコード

JavaScript
1<TreeView
2  defaultCollapseIcon={<ExpandMore />}
3  defaultExpandIcon={<ChevronRight />}
4>
5  {majors.map(major => (
6    <TreeItem key={major.code} nodeId={major.code} label={major.name}>
7      {major.middles.map(middle => (
8        <TreeItem key={major.code + middle.code} nodeId={major.code + middle.code} label={middle.name}>
9          {middle.minors.map(minor => (
10            <TreeItem
11              key={major.code + middle.code + minor.code}
12              nodeId={major.code + middle.code + minor.code}
13              label={minor.name}
14              onClick={(e) => { console.log(e) }} // ここで nodeId を取得したいです。
15            />
16          ))}
17        </TreeItem>
18      ))}
19    </TreeItem>
20  ))}
21</TreeView>

試したこと

イベント内の nativeEvent 等一通り確認してみましたが、見当たりませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

TreeView と TreeItem のドキュメントを調べてみましたが、

末端の

ということだと、ご質問のような要件を満たすコールバックのprops はどちらにも無いようですね。（末端ではないノードだと、 TreeView の prop onNodeToggle コールバックを設定すれば、その引数として nodeId が渡されてきますが。）

ただし、ご質問のコードですと、以下でよいかと思いますがいかがでしょうか？

jsx
1<TreeItem
2  key={major.code + middle.code + minor.code}
3  nodeId={major.code + middle.code + minor.code}
4  label={minor.name}
5  onClick={(e) => { 
6    const nodeId = major.code + middle.code + minor.code
7
8    // 上記の nodeId を以下で利用する。
9　　 ・・・
10  }}
11/>