何がしたかったのか

Reactのpropsで変数の他に、関数も渡すことができることは、多くの方がご存じかと思います。私はこれを使って、ボタンのコンポーネントに対してonClickで発火する関数を渡そうとしました。引数の無い関数では思い通りに動くのですが、引数をつけるとボタンを押さずともページが読み込まれた瞬間に実行されていしました...

App.js

import Button from './Button'

function App() {
  const func1 = () => {
    alert("ボタンが押されたよ！")
  }

  const func2 = ( data ) => {
    alert("ボタンが押されたよ！\n" + data + "っていうデータも受け取ったよ！" )
  }

  return (
    <div className="App">
      {/* ↓ 動画では使わない方にコメントをしています。 */}
      <Button func={ func1 }></Button>
      <Button func={ func2("data") }></Button>
      <a href="">
        <button className="button">リロード</button>
      </a>
    </div>
  )
}

export default App

Button.jsx

const Button = ( props ) => {
  return (
    <button className="button" onClick={ props.func }>ボタンを押してね！</button>
  )
}

export default Button

引数なしの場合(思い通りにいった)

動画のように引数なしの場合は、リロードしても特に何も起こらず、左のボタンを押すと関数が実行されます。

引数ありの場合(思い通りにいかなかった...)

動画のように引数をつけると、リロードしたときに関数が実行されます。さらに、左のボタンを押しても何も反応しません。

解決策

App.jsとButton.jsxの内容をそれぞれ少し変更します。

まずApp.jsのほうでは、引数にした値を別のpropsとしてコンポーネントに渡します。

App.js

- <Button func={ func2("data") }></Button>
+ <Button data="data" func={ func2 }></Button>

Button.jsxの方では、onClick内の関数の呼び出し方を以下のように変更します。

Button.jsx

- <button className="button" onClick={ props.func }>ボタンを押してね！</button>
+ <button className="button" onClick={ () => props.func(props.data) }>ボタンを押してね！</button>

できた！

無事、引数付きの関数を実行することができました！

ではまた。