2017-06-27 91 views
1

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为所选择的选项可以是任何选项。我如何找到默认值

回答

3

React使用value instead of selected来确保表单组件之间的一致性。您可以使用defaultValue设置初始值。如果你是controlling the value,你也应该设置value。如果没有,请不要设置value,而应处理onChange事件以对用户操作做出反应。

注意valuedefaultValue应该匹配选项的value

+0

我选择“value”属性而不是defaultValue,正如你所说的,我保留了“value”属性的值作为选项,并选择相同的值。因此,它的工作..!感谢名单。 – Piyush

0

您可以做的是将<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> 
); 
} 
相关问题