web-dev-qa-db-fra.com

L'utilisation du composant Controller de react-hook-form ne permet pas à Antd Select personnalisé d'afficher l'étiquette

J'utilise Antd Select composant pour créer un composant personnalisé qui me donne la possibilité de renvoyer un objet au lieu d'une valeur primitive et afficher la valeur imbriquée dans l'élément d'objet dans les options de liste déroulante de sélection, cela fonctionne bien et il peut être validé en utilisant react-hook-form :

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

</Form.Item>

Cela fonctionne également avec le composant Controller il n'affiche pas l'étiquette à l'intérieur de l'entrée de sélection:

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

pour plus de détails, vérifiez le code complet dans l'aire de jeux codesandbox

Edit proud-wildflower-3gndt

javascriptreactjsantdreact-hook-form
4
Boussadjra Brahim

La suppression de la valeur initiale innerProps ne résoudra pas le problème dans le cas de la réinitialisation ou de la définition des valeurs initiales des formulaires (en utilisant reset ).

vous devez définir les accessoires value et defaultValue pour votre sélection personnalisée (SpringSelect)

pour la sélection contrôlée cela fonctionnera correctement, pour la réinitialisation, mais pour les non contrôlés, vous devez utiliser la fonction watch hook-form pour afficher les valeurs initiales

voir la boîte condeSande ci-dessous:

Edit currying-star-kyvbo

1
Springer F

Lorsque le composant est à l'intérieur du contrôleur, un accessoire value lui est envoyé. Et vous supprimez simplement les onChange et onBlur des accessoires.

Select utilisera cette valeur de prop, mais c'est un objet, c'est pourquoi il n'affiche pas l'étiquette.

Pour réparer, vous pouvez simplement supprimer delete tmp.value; avant d'ajouter les accessoires à innerProps

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

Je place un console.log, comme vous pouvez le voir department1 a un champ value

1
rafaelncarvalho