web-dev-qa-db-fra.com

React | Ant design select value default

J'utilise ant ant design dans mon projet.

Ici, j'ai une sélection comme champ dynamique. lorsque j'essaie de définir la valeur par défaut pour sélectionner. Ça ne marche pas.

<Select defaultValue="lucy">
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>

Je définit la valeur par défaut comme lucy Mais cela ne fonctionne pas

Code de reproduction: https://codesandbox.io/s/6x3qv6wymr

javascriptreactjsantd
6
Selvin

Selon la documentation , vous ne devez pas utiliser value ou defaultValue avec getFieldDecorator.

Après avoir été enveloppé par getFieldDecorator, les accessoires value (ou autre propriété définie par valuePropName) onChange (ou autre propriété définie par trigger) seront ajoutés aux contrôles de formulaire ， le flux de données du formulaire sera géré par Form, ce qui entraînera:

  1. Vous ne devez pas utiliser onChange pour collecter des données, mais vous pouvez toujours écouter les événements onChange (et ainsi de suite).

  2. Vous ne pouvez pas définir la valeur du contrôle de formulaire via la valeur defaultValue prop, et vous devez définir la valeur par défaut avec initialValue dans getFieldDecorator à la place .

  3. Vous ne devez pas appeler setState manuellement, veuillez utiliser this.props.form.setFieldsValue pour modifier la valeur par programme.

Ainsi, dans votre code, vous devez définir initialValue au lieu de defaultValue comme indiqué ci-dessous:

{getFieldDecorator(`names[${k}]`, {
        validateTrigger: ["onChange", "onBlur"],
        initialValue: "lucy",
        rules: [
          {
            required: true,
            whitespace: true,
            message: "Please input passenger's name or delete this field."
          }
        ]
      })(
        <Select>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="Yiminghe">yiminghe</Option>
        </Select>
      )}

Vous pouvez vérifier la démo de travail sur codesandbox.io .

18
Triyugi Narayan Mani

Problème dans "getFieldDecorator", si vous le supprimez, tout va bien. Alors cherchez pb là, pas de problème avec React | Ant

0
Denis Kuratovich