web-dev-qa-db-fra.com

Attention: Utilisez les propriétés 'defaultValue' ou 'value' sur <select> au lieu de définir 'selected' sur <option>

SCÉNARIO Un utilisateur a une liste déroulante et il sélectionne une option. Je veux afficher cette liste déroulante et faire de cette option une valeur par défaut qui a été sélectionnée par cet utilisateur la dernière fois.

J'utilise sélectionné attribut sur option mais React génère un avertissement me demandant d'utiliser la valeur par défaut sur select.

Par exemple.

render: function() {
    let option_id = [0, 1];
    let options = [{name: 'a'}, {name: 'b'}];
    let selectedOptionId = 0

    return (
      <select defaultValue={selectedOptionId}>
        {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
        )}
      </select>
    )
  }
});

Le problème est que je ne connais pas le selectedOptionId car l'option sélectionnée pourrait être n'importe quelle option. Comment pourrais-je trouver le defaultValue?

reactjsselectdropdown
18
Piyush

React utilise value à la place de selected pour assurer la cohérence des composants de formulaire. Vous pouvez utiliser defaultValue pour définir une valeur initiale. Si vous êtes contrôlant la valeur , vous devez également définir value. Sinon, ne définissez pas value et gérez plutôt l'événement onChange pour réagir à l'action de l'utilisateur.

Notez que value et defaultValue devraient correspondre à value de l'option.

29
ryanjduffy

Si vous souhaitez définir un espace réservé et ne pas sélectionner de valeur par défaut, vous pouvez utiliser cette option.

      <select defaultValue={'DEFAULT'} >
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>

Ici, l'utilisateur est obligé de choisir une option!

EDIT

S'il s'agit d'un composant contrôlé

Dans ce cas, n'utilisez pas la valeur par défaut.

 function TheSelectComponent(props){
     let currentValue = props.curentValue || "DEFAULT";
     return(
      <select value={currentValue} onChange={props.onChange}>
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>
    )
}
10
Dehan de Croos

Ce que vous pourriez faire est d’avoir l’attribut selected sur le <select>tiquette est un attribut de this.state que vous avez défini dans le constructeur. Ainsi, la valeur initiale que vous définissez (la valeur par défaut) et lorsque la liste déroulante est modifiée, vous devez modifier votre état.

constructor(){
  this.state = {
    selectedId: selectedOptionId
  }
}

dropdownChanged(e){
  this.setState({selectedId: e.target.value});
}

render(){
  return(
    <select value={this.selectedId} onChange={this.dropdownChanged.bind(this)}>
      {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
      )}
    </select>
  );
}
6
Sammy I.