在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元素然后滾動到該元素，從而創建了一個非常onMenuOpen解決方法，但是這破壞了箭頭鍵的功能。

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描述的錯誤的解決方法。