在react-select中将菜单打开为默认值

Question

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

CodeSandbox —默认应为2002。选择一个值（2002或其他方式）后，它可以正常工作，但是当页面首次加载时，您必须在菜单中向下滚动以找到该值。

每对文档我曾尝试value和defaultValue并selectedOption，但似乎没有任何工作。我通过利用onMenuOpen渲染后找到正确的DOM元素然后滚动到它来创建一个非常棘手的解决方法，但是这破坏了箭头键的功能。

Answer 1

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

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

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

检查工作叉https://codesandbox.io/s/0xzmy6wvln

我所做的就是创建了一个函数，该函数从options数组中提取所选的选项并将其传递给它，这样，即使第一次也是如此。

我鼓励您在他们的仓库中提出这个问题，并设法解决它。