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。一旦你 select 一个值（2002 或其他）它工作正常，但是当页面第一次加载时你必须在菜单中向下滚动到求值。

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

Answer 1

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

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

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

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

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

我鼓励您在他们的回购协议中提出这个问题并尝试解决它。

Answer 2

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

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

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

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

Opening the menu to the default value in react-select

reactjs

react-select