以前はpropsでset〇〇を直接渡していましたが、修正しました！(23/05/06)
やりたいこと
子コンポーネントのテキストボックスに変更があるたび、入力内容を親コンポーネントに表示する
前提
同じコンポーネント内でのステートの変更、取得ができている状態とする。
（詳細はこちら→React inputのvalueを表示する）
propsの基本おさらい
結論を見たい方はさくっとこちらへ→ 実装
Reactではコンポーネント間のデータの受け渡しはpropsを使って行う。
親→子へ値を渡すとき
親から子へ送る
子コンポーネントを呼び出すところで、props名={値}で渡す
Parent.js
// 親コンポーネント
import Child from './Child';
import React from 'react';
const Parent() {
return (
<div>
<Child count={1000} />
</div>
);
}
export default Parent;
子で受け取る
引数にpropsを指定。
{props.props名}で親から送られているデータは取得可能。
引数でpropsを受け取るのを忘れないで！
Child.js
// 子コンポーネント
const Child = (props)=>{ // 引数でpropsを受け取る
return(
<>
<p>{props.count}</p>
</>
)
}
export default Child
子から親にデータを渡す流れ
では子から親にデータを渡したいときは？
大まかな流れ↓
- 親コンポーネント：
Stateと、Stateを更新する関数（Set〇〇）を定義 - 親コンポーネント：
1.で作成したSet〇〇を呼び出す関数Aを定義（引数の値でStateを更新するような処理にする） - 親コンポーネント：
2.で作成した関数Aを子コンポーネントにpropsで渡す - 子コンポーネント：
props経由で関数Aを受け取る - 子コンポーネント：
関数Aの引数に親に渡したい値を入れる
→子コンポーネントから親コンポーネントに値を渡せる
実装
（私が）ごちゃごちゃしてくるので、しつこいほどコメントを入れていきます。
親コンポーネント
Parent.js
import React, { useState } from "react";
import Child from "./Child";
//↑useStateを使う宣言 & 子コンポーネントの場所はここだよ宣言
const Parent = () => {
const [text, setText] = useState("");
// ↑親コンポーネントで使う：textの初期値とtextを更新する関数を宣言
// ↓子コンポーネントから受け取った値で親コンポーネントのtextを更新する関数A
const handleValueChange = (newValue) => {
setText(newValue);
};
return (
<div>
<Child handleValueChange={handleValueChange} />
{/* textを子コンポーネント側の値で更新するためにpropsで渡す */}
<h1>{text}</h1>
{/* ↑textはここに表示 */}
</div>
);
};
export default Parent;
子コンポーネント
※子コンポーネントは以前の記事のものを一部流用。
React inputのvalueを表示する
import React, { useState } from "react";
//propsで値を受け取る宣言。（忘れがちなので注意）
const Child = (props) => {
// 親コンポーネントから受け取った関数を使って、inputの値を渡す
const handleInputChange = (event) => {
const value = event.target.value;
props.handleValueChange(value);
};
return (
<>
<input
type="text"
// フォームが更新されるとhandleInputChangeが呼ばれる
onChange={handleInputChange}
/>
</>
);
};
export default Child;
登場人物
親側と子側それぞれの変数と関数について整理。
親側
-
text→変数。子コンポーネントから値を受け取ったらここに入れる。 -
setValueText→上記textを更新できる関数。 -
handleValueChange→setValueText関数を使って、引数の値でtextを更新する関数。
子側
-
props.handleInputChange→親側から子へpropsでもらった関数。 -
handleInputChange→フォームに変更のあった場合呼ばれる。valueを見てpropsで受け取った関数を使い親に更新した値を渡す。