react hook formのCotrollerでOnChangeイベントを発火させたい

Question

★困りごと
react hook formのCotrollerを使用して、セレクトボックスを実装しようとしているが、選択項目を変更した時のonChangeイベントが発火しない。

★実装コード
下記です。SERVICE_LISTは違うコンポーネントから配列を持ってきているだけです。
これでonChangeイベントは発火しますが、値が入ってきません。
逆に、onChangeの記述を消すと、値が入ってきます。

★達成したいこと
値も入り、onChangeイベントも発火するようにしたい。

              <Controller
                control={control}
                name="serviceType"
                rules={{ required: true }}
                render={({ field }) => (
                  <Select
                    {...field}
                    options={SERVICE_LIST}
                    instanceId="selectbox"
                    onChange={() => console.log(123)}　←ココ
                  />
                )}
              />

Answer 1

下記の実装で解決しました。
参考URLを記載しておきます。
https://qiita.com/NozomuTsuruta/items/60d15d97eeef71993f06

              <Controller
                control={control}
                name="serviceType"
                rules={{
                  required: true,
                  onChange: () => setIsConfirmationVisible(false),
                }}
                render={({ field: { onChange, onBlur, value, name, ref } }) => (
                  <Select
                    options={SERVICE_LIST}
                    instanceId="selectbox"
                    name={name}
                    onChange={onChange}
                  />
                )}
              />

Answer 2

Controllerコンポーネントのrenderプロップスで field: { onChange, onBlur, value, name, ref },としてselectのonChangeへ代入してみてください(下記のコード参照)

onChangeの記述を消すと値が反映されるのは{...field}としているのでCotrollerコンポーネントのonChangeに値がわたっていますが、Selectコンポーネント側で追加されたonChangeからはControllerに値が渡されていないので反映されないということだと思われます。

ソースは公式の物を引用させていただきました。
https://react-hook-form.com/api/usecontroller/controller/

<Controller
  control={control}
  name="test"
  render={({
    field: { onChange, onBlur, value, name, ref },
    fieldState: { invalid, isTouched, isDirty, error },
    formState,
  }) => (
    <Checkbox
      onBlur={onBlur} // notify when input is touched
      onChange={onChange} // send value to hook form
      checked={value}
      inputRef={ref}
    />
  )}
/>

Comments

[tachiuo]

senryTY　様

丁寧なご回答ありがとうございます。
下記に編集しましたが、やはりonChangeイベントが発火しません。
ちなみにsetIsConfirmationVisible(false)は単純にTrue→FalseにするuseStateです。

<Controller
control={control}
name="serviceType"
rules={{ required: true }}
onChange={() => setIsConfirmationVisible(false)}
render={({ field: { onChange, onBlur, value, name, ref } }) => (
<Select
options={SERVICE_LIST}
instanceId="selectbox"
name={name}
onChange={onChange}
/>
)}
/>

[senryTY]

これですとどうでしょう

```
<Controller
control={control}
name="serviceType"
rules={{ required: true }}
render={({ field: { onChange, onBlur, value, name, ref } }) => (
<Select
options={SERVICE_LIST}
instanceId="selectbox"
name={name}
onChange={onChange(()=>setIsConfirmationVisible(false))}　// ここ
/>
)}
/>
```

[tachiuo]

senryTY　様

ご連絡遅れて申し訳ございません。
ご提案ありがとうございます！

実装すると、下記のエラーが発生しました。
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

もう少し探ってみます！