Reactjs 在react select（反应选择）中将菜单打开至默认值

我正在使用

react select

允许用户选择他们的出生年份。如果用户已填写，则会将其预设为某个值，例如1950。输入显示正确的值，但当菜单打开时，它会滚动到顶部并显示最近几年（2018、2017、2016等）

如何让它向下滚动到1950并在默认情况下突出显示该项目

我的代码：

class YearPicker extends React.PureComponent {
    options = [
        {label: 2018, value: 2018},
        {label: 2017, value: 2017},
        // ...
        {label: 1950, value: 1950},
        {label: 1949, value: 1949},
        // ...
    ]

    render () {
        return (
            <Select
                options={this.options}
                value={this.props.value}
            />
        )
    }
}

class YearPicker扩展了React.PureComponent{
选项=[
{标签：2018，价值：2018}，
{标签：2017，价值：2017}，
// ...
{标签：1950，值：1950}，
{标签：1949，价值：1949}，
// ...
]
渲染（）{
返回(
)
}
}

-这应该默认为2002年。一旦您选择了一个值（2002或其他），它就可以正常工作，但是当页面第一次加载时，您必须在菜单中向下滚动才能找到该值

---

根据，我尝试了

value

和

defaultValue

以及

selectedOption

，但似乎没有任何效果。我创建了一个非常粗糙的解决方法，利用

onMenuOpen

在渲染后找到正确的DOM元素，然后滚动到它，但是这破坏了箭头键的功能。

我查看了它们的源代码，实际上，您做的一切都是正确的。问题出现在Select.js中的以下代码行中：

 const selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);

在这里，他们使用indexOf和比较对象来确定默认选项的索引。对象相等是通过引用而不是通过值来执行的。因此，当您第一次初始化组件并显式提供对象时，相等失败。错误选项仅第一次突出显示。其余时间，对象相等是有效的，因为它们从选项和索引中提取选定对象

检查工作叉

我所做的是创建一个函数，该函数从选项数组中提取所选选项，并传递该选项，因此即使是第一次，等式也可以工作

---

我鼓励你在他们的回购协议上提出这个问题，并设法解决它

从选项菜单为对象设置默认值

<Select
    options={this.options}
    defaultValue={this.options.find(option => option.value === this.props.value)}
/>

option.value==this.props.value）}
/>

---

这是@cdoshi描述的bug的解决方法。

可以添加JSFIDLE或类似的东西吗？给你：谢谢！我确实打开了一个问题：。顺便说一句，我认为在你的例子中有一些变异。请注意，您实际上并没有从

determinateIndex（）

返回

索引，如果您使用
this.props.options
而不是
this.options
，则此操作无效。您是对的，我没有返回值。检查更新的沙盒，我已经在自己的实现中修复了它。但有点奇怪的是，它在没有回报的情况下发挥了作用。