警告：在<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>

回答

相关问题