6
votes

La définition d'une valeur par défaut avec react-select ne fonctionne pas

J'ai un composant React simple qui obtient un état initial:

    <Select
      name={"age"}
      value={this.state.currentObject.isYounger}
      onChange={newValue => this.addIsYoungerValue(newValue)}
      options={isYoungerOptions}
    />

Je rend ensuite un react-select avec la valeur par défaut de this. state.currentObject.isYounger :

this.state = {
  currentObject: {
    isYounger: false
  }
}

Pour une raison quelconque, la valeur n'est pas définie. Pourquoi?

Codesandbox

Version:

"react-select": "^ 2.4.2",

javascript reactjs arrays react-select

7 commentaires

Pouvez-vous préciser la version que vous utilisez de react-select?

Merci @DharaVihol J'ai mis à jour l'OP avec la version

Il semble que vous rencontrez un problème car vous essayez de définir la valeur Boolean . Pouvez-vous l'essayer une fois avec la valeur String, afin que nous puissions comprendre la cause première et cela aidera à résoudre le problème. @ A7DC

Merci @DharaVihol, j'ai mis à jour pour utiliser des valeurs de chaîne au lieu de booléen, mais cela ne fait rien. J'ai également mis à jour l'OP avec un bac à sable modifiable

Vous pouvez également fournir la prop defaultValue . Comme décrit ici. https://github.com/JedWatson/react-select

J'ai déjà essayé cela en faisant defaultValue = {isYoungerOptions [0] .value} mais cela ne fonctionne pas

Veuillez vérifier la réponse et ainsi que les changements de sandbox @ A7DC

3 Réponses :

4
votes

Ici, le problème n'est pas lié à la sélection de l'état, le problème réel est que l'étiquette ne s'affiche pas.

Donc, selon votre fonction addIsYoungerValue , vous définissez la valeur de this.state.currentObject.isYounger sur l'objet entier. c'est-à-dire {value: true, label: "Younger"} . Ainsi, le problème peut être résolu en modifiant la valeur de l'état initial ci-dessous.

this.state = {
      array: [],
      currentObject: {
        isYounger: { value: true, label: "Younger" }
      }
    };

Et hourra, le libellé de la valeur par défaut sera affiché ..

0 commentaires

5
votes

Votre defaultValue ou value doit être des objets. Dans votre cas, comme ceci:

this.state = {
   array: [],
   currentObject: {
     isYounger: { value: "true", label: "Younger" }
   }
 };

defaultValue={isYoungerOptions[0]}

Voici un exemple en direct .

0 commentaires

1
votes

Il existe une autre façon d'utiliser la valeur comme valeur par défaut . Dans mon cas, j'ai utilisé "id" et "industry" au lieu de "label" et "value"

<Select 
    name="interested_industries"
    options={industries}
    value={interested_industries}
    getOptionLabel={ x => x.id}
    getOptionValue={ x => x.industry}
    onChange={this.handleSelect}
    isMulti
/>

Et dans Select component: -

this.state = {
     interested_industries: [{id:"ANY", industry:"ANY"}]
}

0 commentaires