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

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

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

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

React.js

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

Q&A

解決済

2回答

5960閲覧

React Hooksを使用した親コンポーネントのstateを子コンポーネントから変更する方法を教えてください

whoiwhoi

総合スコア48

JavaScript

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

React.js

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

2グッド

1クリップ

投稿2019/12/20 02:47

React Hooksを利用した場合での、子コンポーネントから親コンポーネントのstateを変更する方法をご教示いただけないでしょうか。

動作はしませんがご回答いただける場合の参考になるかと思い、下記にサンプルを用意いたしました。
よろしければご参照ください。
サンプル

ソースコード

index.js

js

1import React, { useState } from "react"; 2import ReactDOM from "react-dom"; 3import Buttons from "./Buttons"; 4 5const Test = () => { 6 const [count /* , setCount */] = useState(0); 7 8 return ( 9 <React.Fragment> 10 <p>{count}</p> 11 <Buttons /> 12 </React.Fragment> 13 ); 14}; 15 16const rootElement = document.getElementById("root"); 17ReactDOM.render(<Test />, rootElement);

Buttons.jsx

jsx

1import React/* , { useState } */ from "react"; 2 3const Buttons = () => { 4 return ( 5 <React.Fragment> 6 <button>+ 1</button> 7 <button>- 1</button> 8 </React.Fragment> 9 ); 10}; 11 12export default Buttons; 13

コンポーネントを切り分けない場合

Buttonsコンポーネントを作らずindex.jsのみで完結させる場合におけるstateの変更はできました。

サンプル

js

1import React, { useState } from "react"; 2import ReactDOM from "react-dom"; 3 4function Test() { 5 const [count, setCount] = useState(0); 6 7 return ( 8 <> 9 <p>{count}</p> 10 <button onClick={() => setCount(count + 1)}> 11 +1 12 </button> 13 <button onClick={() => setCount(count - 1)}> 14 -1 15 </button> 16 </> 17 ); 18} 19 20const rootElement = document.getElementById("root"); 21ReactDOM.render(<Test />, rootElement);

しかし、可読性やメンテナンス性を上げるために、できるだけコンポーネントを切り分けたいと考えています。

また、stateの配置を親コンポーネント、stateの変更は子コンポーネントにするという発想は、React公式ドキュメントの下記ページを参考にしています。
Step 4: state をどこに配置するべきなのかを明確にする

上記ページの次の項↓
Step 5: 逆方向のデータフローを追加する
で、子から親にあるstateの変更方法が書かれていますが、実装例がHooksを利用していないため、Hooksを利用した場合の方法を知りたいと思い質問した次第です。

RikuS3n, siruku6👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

こんにちは

たとえば、ボタンを以下のような子コンポーネント MyButton に切り分けます。

jsx

1const MyButton = ({label, onClick}) => ( 2 <button onClick={onClick}> 3 {label} 4 </button> 5);

上記を使って、親コンポーネントの以下の部分

修正前

jsx

1 <button onClick={() => setCount(count + 1)}> 2 +1 3 </button> 4 <button onClick={() => setCount(count - 1)}> 5 -1 6 </button>

を以下のように修正します。

修正後

<MyButton onClick={() => setCount(count + 1)} label="+1" /> <MyButton onClick={() => setCount(count - 1)} label="-1" />

投稿2019/12/20 03:23

jun68ykt

総合スコア9058

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

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

0

子から親にあるstateの変更方法が書かれていますが、実装例がHooksを利用していないため、Hooksを利用した場合の方法を知りたいと思い質問した次第です。

Hooksであろうがなかろうが、全く同じです。setStateを子コンポーネントに引き回してください。

投稿2019/12/20 02:50

maisumakun

総合スコア145121

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問