Question

我有一个<select>元素，并且在其中动态填充了<option> s个元素。这些是存根

const options = data.map((value, index) => {
  return <option key={index} value={value}>{value}</option>
});

<select
    value={this.props.selected === null ? "" : this.props.selected}
    onChange={this.props.selectHandler}>
    {options}
</select>

它可以正常工作，但是如果this.props.selected中的值为undefined，""或选项列表中不存在的任何值，则会自动选择第一个选项。这会引起问题，因为有时可能会刷新选项列表，而以前选择的选项可能不再存在。

是否有一种简单的方法来使<select>元素的默认值无效，从而迫使用户第一次选择一个？我希望不要创建额外的“假”元素

Answer 1

如果没有选择的值，默认情况下将选择第一个值。您可能可以添加一个不可选择的选项：

const options = data.map((value, index) => {
  return <option key={index} value={value}>{value}</option>
});

options.unshift(<option selected disabled hidden> -- select an option -- </option>);

如果您看一看小提琴，我选择了第一个，但是展开时将隐藏。

<select>
    <option selected disabled hidden>-- select an option --</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

选择元素和默认选项

1 个答案: