场景用户有一个下拉菜单，他选择一个选项。我想显示该下拉列表并使该选项成为该用户上次选择的默认值。
我在选项上使用了selected属性，但 React 生成了一个警告，要求我在选择时使用默认值。
例如
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而不是selected为了跨表单组件的一致性。您可以使用defaultValue来设置初始值。如果您正在控制 value，您也应该设置value。如果没有，请不要设置value而是处理onChange事件以对用户操作做出react。
请注意，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>
在这里，用户被迫选择一个选项！
编辑
如果这是受控组件
不幸的是，在这种情况下，您将不得不使用违反 React 的 defaultValue 和 value。这是因为按语义react不允许将禁用的值设置为活动的。
function TheSelectComponent(props){
let currentValue = props.curentValue || "DEFAULT";
return(
<select value={currentValue} defaultValue={'DEFAULT'} 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>
);
}
感谢大家关注这个话题！我和我的同事刚刚发现该default_value属性是一个常量，而不是一个变量。
在我构建的其他 React 表单中， Select 的默认值是在关联的 Context 中预设的。所以第一次渲染 Select 时，default_value被设置为正确的值。
但是在我最新的 React 表单（一个小模态）中，我将表单的值作为props传递，然后使用 auseEffect来填充关联的上下文。所以第一次渲染 Select 时，default_value设置为null. 然后当 Context 被填充并且 Select 应该被重新渲染时，default_value不能更改，因此不会设置初始默认值。
解决方案最终很简单：改用value属性。但是弄清楚为什么default_value不像我的其他表格那样工作需要一些时间。
我发布此信息是为了帮助社区中的其他人。
useState使用defaultValue选择默认值。
const statusOptions = [
{ value: 1, label: 'Publish' },
{ value: 0, label: 'Unpublish' }
];
const [statusValue, setStatusValue] = useState('');
const handleStatusChange = e => {
setStatusValue(e.value);
}
return(
<>
<Select options={statusOptions}
defaultValue={[{ value: published, label: published == 1 ? 'Publish' : 'Unpublish' }]}
onChange={handleStatusChange}
value={statusOptions.find(obj => obj.value === statusValue)} required />
</>
)