━目次━
Reactを書いていると、親コンポーネントから子コンポーネントに対して値だけでなく、関数を渡したい場面もでてきます。
意外と引数付きの例がネットになかったのでサンプルコードを載せておきます。
作りたいもの
親が以下のような値をもっているとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const nameArr = [ { "lastname": "黒柳", "firstname": "徹子", }, { "lastname": "山田", "firstname": "花子", }, { "lastname": "なかやま", "firstname": "きんにくん", }, ]; |
この配列を子コンポーネントに渡し、
子コンポーネントはループしながら苗字(lastname)が表示されたボタンを作成、
ボタンを押すとそれぞれの名前(firstname)をアラートで表示するものとします。
サンプルコード
以下がコード全体です。
親コンポーネント
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import React, {Component} from "react"; import Child from "./Child"; class Parent extends Component { constructor(props) { super(props); this.state = { nameArr: [ { "lastname": "黒柳", "firstname": "徹子", }, { "lastname": "山田", "firstname": "花子", }, { "lastname": "なかやま", "firstname": "きんにくん", }, ] }; } // ボタン押下時処理 handleClick(firstname) { alert(firstname); } render() { return ( <div> <Child nameList={this.state.nameArr} clickButton={(firstname) => this.handleClick(firstname)} /> </div> ); } } export default Parent; |
子コンポーネント
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React from "react"; const Child = (props) => { // propsから値取り出し const { nameList, clickButton } = props; // ループしてボタン一覧を作成 const buttonItems = nameList.map((namelist, idx) => { return ( <div key={idx} style={{margin: 20}}> <button onClick={() => clickButton(namelist.firstname)}> {namelist.lastname} </button> </div> ); }); return ( <div> {buttonItems} </div> ); } export default Child; |
解説
アロー関数に慣れていないうちは、どの()(カッコ)に書いた値がどう渡っているのか混乱してしまいがちです。
子コンポーネントから引数を渡して親の関数を実行したい場合は以下の手順で考えましょう。
①子コンポーネント内の関数に引数を渡す
|
1 |
<button key={idx} onClick={() => clickButton(namelist.firstname)}> |
() => clickButton([引数])
②親コンポーネントのprops設定部で、引数を受け取りそのまま実行する関数に流す
|
1 |
<Child nameList={this.state.nameArr} clickButton={(firstname) => this.handleClick(firstname)} /> |
([引数を受けとる(名前は何でもOK)]) => this.handleClick([←の引数に設定した変数名をそのまま書く])
③おおもとの関数で値を受け取り実行する
|
1 2 3 4 |
handleClick(firstname) { alert(firstname); } |
handleClick([引数を受け取る(名前は何でも)]) {
(↑の引数に設定した変数名で値を使える)
}
といった感じですね。
それでは！また！！
最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
