• 目的別厳選記事




Reactを書いていると、親コンポーネントから子コンポーネントに対して値だけでなく、関数を渡したい場面もでてきます。


意外と引数付きの例がネットになかったのでサンプルコードを載せておきます。

作りたいもの

親が以下のような値をもっているとします。


この配列を子コンポーネントに渡し、

子コンポーネントはループしながら苗字(lastname)が表示されたボタンを作成

ボタンを押すとそれぞれの名前(firstname)をアラートで表示するものとします。


サンプルコード

以下がコード全体です。

親コンポーネント


子コンポーネント


解説

アロー関数に慣れていないうちは、どの()(カッコ)に書いた値がどう渡っているのか混乱してしまいがちです。

子コンポーネントから引数を渡して親の関数を実行したい場合は以下の手順で考えましょう。

①子コンポーネント内の関数に引数を渡す


() => clickButton([引数])


②親コンポーネントのprops設定部で、引数を受け取りそのまま実行する関数に流す


([引数を受けとる(名前は何でもOK)]) => this.handleClick([←の引数に設定した変数名をそのまま書く])


③おおもとの関数で値を受け取り実行する


handleClick([引数を受け取る(名前は何でも)]) {
 (↑の引数に設定した変数名で値を使える)
}


といった感じですね。

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-