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

【问题标题】：react-select default value set but not highlightedreact-select 默认值设置但未突出显示
【发布时间】：2021-11-28 07:47:19
【问题描述】：

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

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

defaultValue selected

Not highlighted in the menu

这是默认值，正确：

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

也许是因为值是一个对象？

有人有什么建议吗？

【问题讨论】：

你能不能只检查“default”而不是defaultValue，我有同样的问题，它更早对我有用。
很可能，选择通过引用比较来识别默认值。如果默认值不是选项数组的一部分，而是一个单独的对象，则它无法确定选择中的哪个值显示为选中。尝试在选项数组中找到默认值并将其作为默认值提供。

标签： javascript reactjs html-select default-value react-select

【解决方案1】：

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

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} />

【讨论】：