我正在尝试在React中构建可搜索的select元素 . 对我来说真正重要的是：

  • 避免使用jQuery

  • 可选择将其中一个选项设置为默认值

我有选项列表，现在看起来像这样：

<select
    onChange={props.onChange}
    id={props.id}
    className={props.style || "form-control"}>
    {!props.defaultOption ?
        <option value="" selected>Select</option> :
        <option value={props.defaultOptionValue} disabled selected>{props.defaultOption}</option>}
    {props.options.map((item, i) => {
        if (item.id === props.defaultOptionValue) return false;
        return <option key={i} value={item.id}>{item.name}</option>
    })}
</select>

没有什么比这更复杂 . 我传递了更改处理程序，id和样式 . 如果我在props中提供defaultOptionValue和defaultOption，那么这意味着我需要检查这个选项 .

Datalist对我很有用，但它不支持safari，我想在输入中显示标签，而不是值，因为value是对象的id和标签名称 .

我已经检查了react-select，但它缺少设置默认值的选项 .

html reactjs select option