Achtung: Verwenden Sie die ‚default‘ oder ‚Wert‘ Requisiten auf <select> statt auf <option>

Question

scenerio ‚ausgewählt‘ Einstellung hat ein Benutzer eine Dropdown und er wählt eine Option. Ich möchte dieses Dropdown anzeigen und diese Option zu einem Standardwert machen, der von diesem Benutzer beim letzten Mal ausgewählt wurde.

Ich verwende ausgewählt Attribut auf Option, aber React generiert eine Warnung fragt mich, den Standardwert bei Auswahl 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> 
    ) 
    } 
}); 

Problem ist, dass ich weiß nicht, den selectedOptionId als die gewählte Option eine Option sein könnte. Wie würde ich den defaultValue finden?

Answer 1

Reagieren Anwendungen value instead of selected für die Konsistenz zwischen den Formularkomponenten. Sie können defaultValue verwenden, um einen Anfangswert festzulegen. Wenn Sie controlling the value sind, sollten Sie auch value einstellen. Wenn nicht, setzen Sie nicht value und behandeln Sie stattdessen das Ereignis onChange, um auf Benutzeraktionen zu reagieren.

Hinweis dass value und defaultValue sollte die value der Option entsprechen.

Answer 2

Was Sie tun könnten, ist das selected Attribut auf dem <select> Tag ein Attribut von this.state zu sein, das Sie im Konstruktor setzen. Auf diese Weise wird der Anfangswert festgelegt (der Standardwert). Wenn sich das Dropdown-Menü ändert, müssen Sie Ihren Status ändern.

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

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

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