useInputState

useInputState は、入力値の状態を管理し、必要に応じて値を変換できる React フックです。 返される onChange ハンドラーは、<input> と <textarea> の両方の要素で使用できます。

インターフェース

function useInputState(
  initialValue: string | (() => string) = '',
  transformValue: (value: string) => string = (v: string) => v
): [
  value: string,
  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>,
];

パラメータ

• initialValuestring | (() => string)
  

  入力値の初期値です。デフォルトは空文字列（""）です。

• transformValue(value: string) => string
  

  入力値を変換する関数です。デフォルトは入力値をそのまま返す恒等関数です。

戻り値

• [value: string, onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>]
  

  次の要素を含むタプルです。

  • valuestring
    

    現在の状態の値です。

  • onChangeChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
    

    状態を更新する関数です。

使用例

function Example() {
  const [value, onChange] = useInputState('');
  return (
    <>
      <input type="text" value={value} onChange={onChange} />
      <textarea value={value} onChange={onChange} />
    </>
  );
}