it-swarm.com.de

Warnung: Verwenden Sie die Requisiten 'defaultValue' oder 'value' für <select>, anstatt 'selected' für <option> festzulegen

SZENARIO Ein Benutzer hat eine Dropdown-Liste und wählt eine Option aus. Ich möchte dieses Dropdown-Menü anzeigen und diese Option zu einem Standardwert machen, der beim letzten Mal von diesem Benutzer ausgewählt wurde.

Ich verwende das Attribut ausgewählt für die Option, aber React erzeugt eine Warnung, in der ich aufgefordert werde, den Standardwert für select zu verwenden.

Für z.B.

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

Das Problem ist, dass ich die selectedOptionId nicht kenne, da die ausgewählte Option eine beliebige Option sein könnte. Wie würde ich das defaultValue finden?

18
Piyush

React verwendet value anstelle von selected , um die Konsistenz über die Formularkomponenten hinweg zu gewährleisten. Sie können defaultValue verwenden, um einen Anfangswert festzulegen. Wenn Sie den Wert steuern sind, sollten Sie auch value setzen. Wenn nicht, setzen Sie value nicht und behandeln Sie stattdessen das Ereignis onChange, um auf Benutzeraktionen zu reagieren.

Beachten Sie , dass value und defaultValue mit value der Option übereinstimmen sollten.

29
ryanjduffy

In einem Fall, in dem Sie einen Platzhalter festlegen und keinen Standardwert auswählen möchten, können Sie diese Option verwenden.

      <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>

Hier muss der Benutzer eine Option auswählen!

EDIT

Wenn dies eine kontrollierte Komponente ist

Verwenden Sie in diesem Fall nicht den Standardwert.

 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

Was Sie tun könnten, ist das selected Attribut auf dem <select> Tag ist ein Attribut von this.state, das Sie im Konstruktor festgelegt haben. Auf diese Weise wird der von Ihnen festgelegte Anfangswert (der Standardwert) und wenn sich die Dropdown-Liste ändert, müssen Sie Ihren Status ändern.

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.