🎃

[React] onClickがクリックしなくても動作してしまうとき

2021/01/04に公開

const someFunction = () => (...)という関数を定義したあと、
下記のようにbuttonのonClickに記述したのですが、どうやらクリックしなくても実行されているみたいでした。

<button onClick={someFunction}}>BUTTON</button>

そこで色々調べたところ、onClickには関数を渡さなければならないとのことでした。

something.jsx
// 正しい
<button onClick={() => someFunction()}>BUTTON</button>

// 間違い(式 or 値を渡している)
<button onClick={someFunction}}>BUTTON</button>

結論

onClickに渡すものは

○ 関数
X 式
X 値

である。

関数を渡すと、クリック時にその関数が動作する
式, 値を渡すと、画面読み込み時にその式, 値を評価(実行)してしまう

Discussion