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创建了一个非常棘手的解决方法，在渲染后找到正确的DOM元素，然后滚动到该元素，但是这破坏了箭头键的功能。

Answer 1

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

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

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

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

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

我鼓励您在其回购中提出此问题，并设法解决此问题。

Answer 2

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

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

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

在react-select

2 个答案: