React Hook Formで別の入力値に基づいて入力を条件付きで無効にする方法

1. React Hook Formをインストールします。

npm install react-hook-form

2. フォームを作成し、useFormフックを使用して初期化します。

import { useForm } from 'react-hook-form';
function MyForm() {
  const { register, handleSubmit, watch } = useForm();
  const inputValue = watch('inputFieldName');
  const onSubmit = (data) => {
    // フォームの送信処理
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="inputFieldName" ref={register} />
      <input type="text" name="dependentInput" ref={register({ disabled: inputValue === 'someValue' })} />
      <button type="submit">送信</button>
    </form>
  );
}

3. watch関数を使用して、監視する入力値を指定します。watch関数は、指定したフィールドの値を返します。

4. ref={register({ disabled: inputValue === 'someValue' })}のように、register関数を使用して入力を登録します。disabledプロパティに条件式を指定することで、入力を条件付きで無効にすることができます。

上記のコードでは、inputFieldNameという名前の入力フィールドの値を監視しています。もしinputFieldNameの値が'someValue'と等しい場合、dependentInputという名前の入力フィールドが無効になります。

この方法を使用することで、React Hook Formを使って別の入力値に基づいて入力を条件付きで無効にすることができます。この手法を使えば、フォームのバリデーションや動的なフォームの制御を簡単に実装することができます。