【React】イベントハンドラで引数を渡す方法

てきとうにいろいろ

【React】イベントハンドラで引数を渡す方法

Reactで電卓的なものが作りたかったので、推したボタンによって数値が入るようにしたかった。

で、こんな感じで書いてみた。
(ほんとはもっとボタンあるけど省略)

import React from "react";
import Button from "@mui/material/Button";

export default function Hoge() {
  const handleClick = (v) => {
    console.log(v);
  };

  return (
    <div>
        <Button variant="contained" onClick={handleClick(1)}>
          1
        </Button>
    </div>
  );
}

が、これだと思ったように動いてくれない。
なぜかコンソールに「1」と表示される。

というのも、これだと関数を実行する記述になってしまうらしく、画面が表示されると同時に関数が実行されて「1」と表示されてしまうみたい。

というわけで修正。
イベントハンドラの中にアロー関数を入れてみる。

import React from "react";
import Button from "@mui/material/Button";

export default function Hoge() {
  const handleClick = (v) => {
    console.log(v);
  };

  return (
    <div>
        <Button variant="contained" onClick={() => handleClick(1)}>
          1
        </Button>
    </div>
  );
}

これで思ったように動くようになってくれた。

が、どうやらこれはあまりよろしくない書き方らしい。

というわけで、よい書き方がこれらしい。

import React from "react";
import Button from "@mui/material/Button";

export default function Hoge() {
  const handleClick = (v) => {
    console.log(v);
  };

  return (
    <div>
        <Button variant="contained" onClick={handleClick.bind(this, 1)}>
          1
        </Button>
    </div>
  );
}

んーーー。なんかめんどくさいなぁ。