Reactのonclickに引数を渡したいっ!

普通に引数が無い場合は、

clicked() {
  console.log('click!!');
}

render () {
  <div>
    <a onClick={clicked}>リンク</a>
  </div>
}

これで、クリックした時にclickedが呼ばれるので問題なし。

これに普通に引数を渡すと、

render () {
  <div>
    <a onClick={clicked(100)}>リンク</a>
  </div>
}

こんな感じに書いて動かしてみると、renderしたタイミングでいきなりclickedが呼ばれる。
(表示した時点でclickedが呼ばれる)

そこで、無名関数を使う。

render () {
  <div>
    <a onClick={() => clicked(100)}>リンク</a>
  </div>
}

こうすればrenderしたタイミングではnullがreturnされるんで、何も起きずにクリックした時にclickedが呼ばれる。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください