场景用户有一个下拉列表并选择一个选项。我想显示该下拉列表并将该选项设置为上次由该用户选择的默认值。
我在选项上使用了选定的属性,但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,因为所选的选项可以是任何选项。我怎样才能找到defaultValue?
React使用value
instead of selected
来保证表单组件的一致性。您可以使用defaultValue
设置初始值。如果你是controlling the value,你也应该设置value
。如果没有,请不要设置value
,而是处理onChange
事件以响应用户操作。
请注意,value
和defaultValue
应该与期权的value
相匹配。
在要设置占位符但未选择默认值的实例中,可以使用此选项。
<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>
在这里,用户被迫选择一个选项!
编辑
如果这是一个受控制的组件
在这种情况下,请勿使用默认值。
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>
)
}
你可以做的是让selected
标签上的<select>
属性是你在构造函数中设置的this.state
的属性。这样,您设置的初始值(默认值)以及下拉菜单更改时您需要更改状态。
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>
);
}