reactjs - 在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 或其他)，它就可以正常工作，但是当页面首次加载时，您必须在菜单中向下滚动才能找到该值。

每the docs我尝试过 value 和 defaultValue 以及 selectedOption 但似乎没有任何效果。我通过利用 onMenuOpen 创建了一个非常hacky的解决方法，在渲染后找到正确的 DOM 元素，然后滚动到它，但这会破坏箭头键的功能。

Answer 1

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

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

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

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

我所做的是创建一个函数，从选项数组中提取选定的选项并传递该选项，因此即使是第一次，平等也有效。

我鼓励您在他们的存储库中提出这个问题并尝试解决它。