🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Material Design

Material Designとは、Google社によって提唱されたデザインシステムです。デジタルにおける体験を構築するための見た目や振る舞いに関するガイドラインが含まれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

3115閲覧

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

nerianighthawk

総合スコア544

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Material Design

Material Designとは、Google社によって提唱されたデザインシステムです。デジタルにおける体験を構築するための見た目や振る舞いに関するガイドラインが含まれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/09/12 01:39

前提・実現したいこと

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 等一通り確認してみましたが、見当たりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは

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

末端の

ということだと、ご質問のような要件を満たすコールバックの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/>

つまり、 nodeId prop の値である major.code + middle.code + minor.code を onClick の中でも使えばよいかと思います。

以上、参考になれば幸いです。

投稿2019/09/12 03:08

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nerianighthawk

2019/09/12 04:18

回答ありがとうございます。 よくよく考えればそれで出来ますね。 イベントから取らなくちゃいけないという変な先入観に囚われて失念していました。 ありがとうございます。ベストアンサーに選ばさせていただきます。
jun68ykt

2019/09/12 04:28

どういたしまして。解決されたようで、よかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問