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

Posted 2023-02-18

【中文标题】react-select 默认值设置但未突出显示

【英文标题】：react-select default value set but not highlighted

【发布时间】：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，我有同样的问题，它更早对我有用。

很可能，选择通过引用比较来识别默认值。如果默认值不是选项数组的一部分，而是一个单独的对象，则它无法确定选择中的哪个值显示为选中。尝试在选项数组中找到默认值并将其作为默认值提供。

【参考方案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 />