Comment définir une valeur par défaut dans react-select ?

Question

J'ai un problème avec react-select. J'utilise redux form et j'ai rendu mon composant react-select compatible avec redux form. Voici le code :

const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
      />
    );

et voici comment je l'ai rendu :

<div className="select-box__container">
                  <Field
                    id="side"
                    name="side"
                    component={SelectInput}
                    options={sideOptions}
                    clearable={false}
                    placeholder="Select Side"
                    selectedValue={label: 'Any', value: 'Any'}
                  />
                </div>

Mais le problème est que ma liste déroulante n'a pas de valeur par défaut comme je le souhaite. Qu'est-ce que je fais de mal ? Avez-vous des idées ?

Answer 1

Je suppose que vous avez besoin de quelque chose comme ça :

const MySelect = props => (
<Select
    {...props}
    value={props.options.filter(option => option.label === 'Some label')}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

Answer 2

J'ai utilisé le paramètre defaultValue, ci-dessous le code qui me permet d'obtenir une valeur par défaut et de mettre à jour la valeur par défaut lorsqu'une option est sélectionnée dans la liste déroulante.

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

Answer 3

Si vous êtes venu ici pour react-select v2, et que vous avez toujours des problèmes - la version 2 n'accepte maintenant qu'un objet comme value , defaultValue etc.

C'est-à-dire, essayez d'utiliser value={{value: 'one', label: 'One'}} au lieu de simplement value={'one'} .

Answer 4

J'avais une erreur similaire. Assurez-vous que vos options ont un attribut de valeur.

<option key={index} value={item}> {item} </option>

Ensuite, la valeur de l'élément selects correspond initialement à la valeur des options.

<select 
    value={this.value} />

Answer 5

Je viens de passer par là et j'ai choisi de définir la valeur par défaut dans la fonction INIT du réducteur.

Si vous liez votre select avec redux, il vaut mieux ne pas le "délier" avec une valeur par défaut qui ne représente pas la valeur réelle, mais plutôt définir la valeur lorsque vous initialisez l'objet.