web-dev-qa-db-ja.com

react-hook-formのコントローラーコンポーネントを使用すると、カスタムAntd Selectでラベルを表示できません

Antd Selectコンポーネントを使用して、カスタムコンポーネントを作成し、プリミティブ値の代わりにオブジェクトを使用し、選択ドロップダウンオプションのオブジェクトアイテムにネストされた値を表示すると、正常に動作し、 react-hook-form ：

<Form.Item ... >
  <SpringSelect style={{ width: "200px" }} options={departments} placeholder="Department 2"
            name="department2"  onChange={e => {setValue("department2", e);}}/>

</Form.Item>

これは Controller コンポーネントでも機能しますが、それはラベルを表示しません選択入力内：

<Controller as={<SpringSelect style={{ width: "200px" }} />}
            placeholder="Department 1" name="department1" options={departments}
            onChange={([e]) => {return { value: e };}} control={control}      />

詳細については、codesandbox playgroundでコード全体を確認してください

Edit proud-wildflower-3gndt

javascriptreactjsantdreact-hook-form
4
Boussadjra Brahim

初期innerPropsから値を削除しても、フォームの初期値をリセットまたは設定する場合の問題は修正されません（ reset を使用）。

カスタム選択（value）のためにdefaultValueおよびSpringSelectプロップを定義する必要があります

制御された選択の場合、リセット、正しく動作しますが、制御されていない場合は、watchフック形式の関数を使用して初期値を表示する必要があります

以下のcondeSandeボックスを参照してください。

Edit currying-star-kyvbo

1
Springer F

コンポーネントがコントローラー内にある場合、valueプロップがそれに送信されます。そして、あなたはただonChangeとonBlurを小道具から削除しています。

Selectはこのprop値を使用しますが、これはオブジェクトであるため、ラベルは表示されません。

修正するには、単に削除できますdelete tmp.value;の前に小道具をinnerPropsに追加します

例： https://codesandbox.io/s/vibrant-river-8r4dt

console.log、 ご覧のように department1にはvalueフィールドがあります

1
rafaelncarvalho