react-select 默认值已设置但未突出显示

Question

当我在 react-select 组件中设置 defaultValue 时，它被正确识别和设置，但在 select 菜单中没有突出显示。

<Select onChange={handleChange} options={options} styles={styles} defaultValue={defaultValue} />

defaultValue selected

Not highlighted in the menu

这是默认值，它是正确的：

{
    "value": {
        "param_user": "TEST"
    },
    "label": "TEST"
}

可能是因为值是一个对象？

有人有什么建议吗？

Answer 1

你是对的，问题的出现是因为 react-select 的默认实现检查选项是否是 select 通过引用编辑的。这意味着如果您的默认选项不是来自选项数组本身，它将不会显示为 selected。幸运的是，react-select 库允许您传入一个判断选项是否为 selected 的谓词。你的情况：

const isOptionSelected = (option, selectValue) => selectValue.some(
  (val) => val.value.param_user === option.value.param_user
);
<Select isOptionSelected={isOptionSelected} onChange={handleChange} options={options} styles={styles} defaultValue={defaultValue} />

react-select 默认值已设置但未突出显示

react-select default value set but not highlighted

javascript

html-select

default-value

reactjs

react-select