在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 (
            
        )
    }
}


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

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


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

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


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

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

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

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

                

        
        
    


    

        

                        
react
                        
select
                        
js
                        
io
                        
label
                        
default
                        
dom
                        
const
                        
focus
                    
    



    

        
写下你的评论吧 !
        

            

                吐个槽吧,看都看了
            
            

                

                                        会员登录 | 用户注册