🪣

inputでvalue以外の値をevent経由で渡す方法

2023/09/05に公開

HTML

tech

TL;DR

カスタムデータ属性 data-*を使用してvalue以外の値をevent経由で渡します。

ソースコード

カスタムデータ属性data-*に値をセットしてあとは渡ってきたevent, e: React.MouseEvent<HTMLInputElement>からe.currentTarget.dataset.* で値を取得できます🎉

App.tsx

import React from 'react';
import './App.css';

function App() {
  const handleOnclick = (e: React.MouseEvent<HTMLInputElement>) => {
    console.log(e.currentTarget.dataset.x);
    console.log(e.currentTarget.dataset.y);
  };

  return (
    <div className="App">
      <input type="button" readOnly value={'÷'} data-x={'/'} data-y={'data-*だからなんでもいけるよ'} onClick={handleOnclick} />
    </div>
  );
}

export default App;

これを使用することになった経緯としては電卓を作っていた際に➗を表示して、クリックされた時に渡す値は/にしたい。これを実現するためにこのカスタムデータ属性を使用することにしました。
もっといいやり方があるよ！という方いらっしゃいましたら教えていただけると泣いて喜びます!ぜひコメントお願いいたします!

ではまた明日!🐈

TL;DR

Discussion