警告：在<select>上使用'defaultValue'或'value'道具代替<option>

SCENERIO用戶有一個下拉菜單並選擇一個選項。我想顯示該下拉列表，並將該選項設置爲該用戶上次選擇的默認值。警告：在<select>上使用'defaultValue'或'value'道具代替<option>

我正在使用選定的屬性的選項，但React生成一個警告，要求我在select上使用默認值。

例如，

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

問題是，我不知道selectedOptionId爲所選擇的選項可以是任何選項。我如何找到默認值？

來源

2017-06-27 Piyush

React使用value instead of selected來確保表單組件之間的一致性。您可以使用defaultValue設置初始值。如果你是controlling the value，你也應該設置value。如果沒有，請不要設置value，而應處理onChange事件以對用戶操作做出反應。

注意是value和defaultValue應該匹配選項的value。

來源

2017-06-27 18:22:36 ryanjduffy

我選擇「value」屬性而不是defaultValue，正如你所說的，我保留了「value」屬性的值作爲選項，並選擇相同的值。因此，它的工作..！感謝名單。 – Piyush

您可以做的是將<select>標記上的selected屬性設置爲您在構造函數中設置的屬性this.state。這樣，您設置的初始值（默認值）以及下拉更改時您需要更改狀態。

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

來源

2017-06-27 18:14:27

警告：在<select>上使用'defaultValue'或'value'道具代替<option>

回答

相關問題