React TypeScriptでinput要素のonChangeイベントを扱う

Typescriptでinput要素のonChangeイベントを扱う方法

概要

イベントオブジェクトの型を指定する

この方法は、イベントオブジェクトの型をReact.ChangeEvent<HTMLInputElement>に指定することで、event.target.valueにアクセスできるようになります。

const [value, setValue] = useState('');

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

return (
  <input type="text" value={value} onChange={handleChange} />
);

as属性を使う

この方法は、input要素のas属性にHTMLInputElementを指定することで、event.targetをHTMLInputElement型として扱えるようになります。

const [value, setValue] = useState('');

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

return (
  <input type="text" value={value} onChange={handleChange} as={HTMLInputElement} />
);

どちらの方法でも、input要素のonChangeイベントを扱うことができます。どちらを使うかは、コードの読みやすさや好みによって判断してください。

補足

• event.target.valueは、string型の値になります。
• event.targetは、HTMLInputElement型のオブジェクトになります。

import React, { useState } from 'react';

const App: React.FC = () => {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>入力された値: {value}</p>
    </div>
  );
};

export default App;

1. useStateを使って、valueという状態変数を初期値""で初期化します。
2. input要素のonChangeイベントに、handleChangeという関数を設定します。
3. handleChange関数では、イベントオブジェクトeを受け取り、e.target.valueから入力された値を取得します。
4. 取得した値をvalue状態変数にセットします。
5. p要素で、value状態変数の値を表示します。

このコードを参考に、input要素のonChangeイベントを扱ってみてください。

Typescriptでinput要素のonChangeイベントを扱う方法

これまで紹介した方法

1. イベントオブジェクトの型を指定する
2. as属性を使う

上記以外にも、input要素のonChangeイベントを扱う方法はいくつかあります。

• useRefフックを使う

useRefフックを使って、input要素の値を保持することができます。

const inputRef = useRef('');

const handleChange = () => {
  setValue(inputRef.current.value);
};

return (
  <input type="text" ref={inputRef} onChange={handleChange} />
);

• useStateフックとuseEffectフックを使う

const [value, setValue] = useState('');

useEffect(() => {
  const inputElement = document.getElementById('my-input');
  inputElement.addEventListener('change', handleChange);

  return () => {
    inputElement.removeEventListener('change', handleChange);
  };
}, []);

const handleChange = () => {
  const inputElement = document.getElementById('my-input');
  setValue(inputElement.value);
};

return (
  <input type="text" id="my-input" value={value} />
);

どの方法を使うべきかは、状況やコードの書きやすさによって判断してください。

input要素のonChangeイベントを扱う方法はいくつかあります。紹介した方法を参考に、状況やコードの書きやすさによって適切な方法を選んでください。