質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

849閲覧

ボタンクリックでグラフにデータを受け渡したい

rapier1991

総合スコア1

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/05/04 16:22

編集2021/05/05 04:15

前提・実現したいこと

reactとechartsを用いてグラフを描写しています。ドロップダウンを作ってその中のボタンをクリックすることでグラフにデータを呼び出したいと思っています。ドロップダウンとグラフの描写はできましたが、ボタンクリックでグラフにデータを受け渡す方法がわかりません。(添付画像参照:AのボタンをクリックでグラフにAのデータを呼び出し、BのボタンをクリックでグラフにBのデータを呼び出したいです。)

イメージ説明

ソースコード

ドロップダウン import React, { useState } from 'react'; import { CSSTransition } from 'react-transition-group'; function Selecter() { return( <Selecterbar> <SelecterbuttonA> <DropdownMenuA /> </SelecterbuttonA> <SelecterbuttonB> <DropdownMenuB />   </SelecterbuttonB> </Selecterbar> ) } ~中略~ <DropdownItem > <text >A</text> </DropdownItem> <DropdownItem >B</DropdownItem> グラフ import React, { Component } from "react"; import ReactEcharts from "echarts-for-react"; class Graph extends Component { getOption = () => ({ ~中略~ render() { return ( <div className="App"> <ReactEcharts option={this.getOption()} style={{ height: 630 }} /> </div> ); } } export default Graph;

ドロップダウンとグラフは別のコンポーネントなのでデータ受け渡しをしようと思い調べてみましたがいまいちわかりません。参考になるサイトなどありましたらご教授願いたいです。

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

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

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

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

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

hoshi-takanori

2021/05/05 07:45

ドロップダウンとグラフの共通の親コンポーネントを介してデータを受け渡せば良いのでは。
hide5stm

2021/05/09 16:19

データは何処にあるのでしょう。 たとえば、 Graphコンポーネントのpropsにデータを含めて、selectが切り替わったら、propsのデータを差し替えて Graphコンポーネントを再renderさせればいいのではと思ったのですが、 上のソースだとデータがの持ち方がよくわかりません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問