react

<Controller
  name={conditionIds.hoge}
  control={control}
  render={({ field }) => (
    <TextField
      {...field}
      label={conditionLabels.hoge}
      value={getValues(conditionIds.hoge)?.toString()}
      onChange={(event) => setValue(conditionIds.hoge, event.target.value)}
      maxLength={100}
    />
  )}
/>

このコードがフォームの送信を引き起こす仕組みは、HTMLのデフォルトの動作に基づいています。HTMLフォームでは、テキストフィールド内でEnterキーを押下すると、そのフォームが自動的に送信されるようになっています。これは、やタグなどのフォーム要素が一つのタグ内にある場合、特にtype="submit"のボタンがなくても、Enterキーによる送信が可能です。

Reactのコンポーネントは、内部的にはタグをレンダリングしており、そのため同じ動作が適用されます。したがって、ユーザーが内でEnterキーを押すと、ブラウザはその親フォーム要素のonSubmitイベントをトリガーします。

react-hook-formを使用している場合、Controllerコンポーネントはをラップしており、onSubmitイベントはuseFormフックで定義されたhandleSubmit関数によって処理されます。これにより、フォームのデータが検証され、指定された送信処理が実行されます。

以下のような構造で、

タグとhandleSubmit関数が定義されていると仮定します：

<form onSubmit={handleSubmit(onSubmit)}>
  <Controller
    name={conditionIds.hoge}
    control={control}
    render={({ field }) => (
      <TextField
        {...field}
        label={conditionLabels.hoge}
        maxLength={100}
      />
    )}
  />
  {/* 他のフォーム要素 */}
</form>

この場合、でEnterキーを押すと、handleSubmit関数が呼び出され、フォームの送信処理が行われます。これが、テキストボックスでEnterキーを押下することで内容がフォームで送信される仕組みです。

Reactでは、TextFieldコンポーネントは最終的にタグをレンダリングします。タグはtype="text"属性を持っている場合、フォーム内でEnterキーが押されたときにフォーム送信をトリガーするというHTMLの標準仕様に従います。

react-hook-formのControllerコンポーネントを使用している場合、fieldオブジェクトのプロパティとしてonChangeハンドラが提供されています。そのため、TextFieldに{...field}を展開することで、onChangeを含む必要なすべてのイベントハンドラが自動的に適用されます。これにより、ユーザーがTextFieldでEnterキーを押下すると、onChangeイベントが発火し、それがフォームのonSubmitイベントをトリガーすることになります。

この挙動は、TextFieldにカスタムのonChangeハンドラを設定していなくても発生します。react-hook-formはonSubmitイベントを処理するためのhandleSubmit関数を提供しており、これによりフォームの送信時にバリデーションやデータの処理が行われます。したがって、TextFieldでEnterキーを押下すると、handleSubmit関数が呼び出され、フォームが送信される流れになります。このプロセスは、

要素のonSubmitプロパティにhandleSubmit関数が割り当てられていることを前提としています。