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

J'ai un problème avec react-select. J'utilise le formulaire redux et j'ai rendu mon composant react-select compatible avec le formulaire redux. 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 le rend:

<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 mal? Des idées?

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}
  />
);

J'ai utilisé le paramètre defaultValue, vous trouverez ci-dessous le code indiquant comment j'ai obtenu une valeur par défaut ainsi que la mise à jour de 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
              });
           }}
/>

Si vous êtes ici pour réagir-select v2, et toujours des problèmes - la version 2 accepte maintenant seulement un objet comme value, defaultValue, etc.

Autrement dit, essayez d'utiliser value={{value: 'one', label: 'One'}}, au lieu de simplement value={'one'}.

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

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

Faites ensuite correspondre initialement la valeur de l'élément selects à la valeur des options.

<select 
    value={this.value} />

En prolongeant la réponse de @ isaac-pak, si vous souhaitez transmettre la valeur par défaut à votre composant dans un accessoire, vous pouvez l'enregistrer dans l'état dans la méthode de cycle de vie componentDidMount () pour vous assurer que la valeur par défaut est sélectionnée la première fois.

Notez que j'ai mis à jour le code suivant pour le rendre plus complet et utiliser une chaîne vide comme valeur initiale par le commentaire.

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.target.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Je viens de faire cela moi-même et j'ai choisi de définir la valeur par défaut à la fonction INIT du réducteur.

Si vous liez votre select avec redux, mieux vaut ne pas le 'dé-lier' avec une valeur par défaut de sélection qui ne représente pas la valeur réelle, définissez plutôt la valeur lorsque vous initialisez l'objet.

Si vous n'utilisez pas redux-form et que vous utilisez l'état local pour les modifications, votre composant react-select pourrait ressembler à ceci:

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}

Utilisez les accessoires defaultInputValue comme ceci:

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

          

pour plus de référence https://www.npmjs.com/package/react-select

Si vos options sont comme ça

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

Votre {props.input.value}devrait correspondre à l'un des 'value'dans votre{props.options}

Signification, props.input.valuedevrait être soit 'one'ou'two'

Pour sélectionner automatiquement la valeur de dans, sélectionnez.

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

Utilisez l'attribut value dans la balise select

value={this.state.contactmethod || ''}

la solution fonctionne pour moi.

1. Créer une propriété d'état pour le texte d'option par défaut dans le constructeur
   • Ne vous inquiétez pas de la valeur de l'option par défaut
2. Ajoutez une balise d'option à la fonction de rendu. Afficher uniquement en utilisant une expression d'état et ternaire
3. Créer une fonction à gérer lorsqu'une option a été sélectionnée

4. Changer l'état de la valeur d'option par défaut dans cette fonction de gestionnaire d'événements en null

   Class MySelect extends React.Component
   {
       constructor()
       {
           super()
           this.handleChange = this.handleChange.bind(this);
           this.state = {
               selectDefault: "Select An Option"
           }
       }
       handleChange(event)
       {
           const selectedValue = event.target.value;
           //do something with selectedValue
           this.setState({
               selectDefault: null
           });
       }
       render()
       {
           return (
           <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
               {this.selectedValue}>
            {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
               {'map list or static list of options here'}
           </select>
           )
       }
   }
   

J'utilise fréquemment quelque chose comme ça.

Valeur par défaut des accessoires dans cet exemple

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}

Vous devez effectuer une recherche approfondie si vous utilisez des groupes dans les options:

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};