react-dates 中的 react-select 不會更新 select 值

Question

我正在使用 react-dates 作為一個簡單的生日選擇器。 我正在使用renderMonthElement道具在日期選擇器頂部呈現 2 個選擇數月和數年：

每當我一個月 select 時，日歷都會正確更新，但是 react-select 組件中顯示的值不會更新。

我的 Select 看起來像這樣：

<Select
        placeholder="Monat"
        styles={{ indicatorSeparator: () => {}, ...customStyles }}
        options={months}
        filterOption={createFilter(filterConfig)}
        name="months"
        value={bdaymonth}
        className="monthSelect"
        onChange={optionSelected => {
          onMonthSelect(month, optionSelected.label)
          setBdayMonth(optionSelected.label)
        }}
      />

一旦我將它從renderMonthElement中取出，它可以通過使用bdaymonth from state或直接使用months.label來完美運行

我認為這可能與在 Portal 中呈現的 SingleDatePicker 有關，但即使我將其呈現為內聯，問題仍然存在。

這是我的 renderMonthElement 的完整代碼（幾乎是從https://stackoverflow.com/a/57666932/6118046偷來的）：

const renderMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
    let i
    let years = []
    for (i = moment().year() - 16; i >= moment().year() - 100; i--) {
      years.push(
        <option value={i} key={`year-${i}`}>
          {i}
        </option>
      )
    }

    const months = moment.months().map((label, value) => {
      return { value: value, label: label }
    })

    return (
      <BdaySelect>
        <div>
          <Select
            placeholder="Monat"
            styles={{ indicatorSeparator: () => {}, ...customStyles }}
            options={months}
            filterOption={createFilter(filterConfig)}
            name="months"
            value={bdaymonth}
            className="landSelect"
            onChange={optionSelected => {
              onMonthSelect(month, optionSelected.label)
              setBdayMonth(optionSelected.label)
            }}
          />
        </div>
        <div>
          <select
            value={month.year()}
            onChange={e => onYearSelect(month, e.target.value)}
          >
            {years}
          </select>
        </div>
      </BdaySelect>
    )
  }

Answer 1

通過將 Select 的值更改為

value={months.filter(function(month) {
  return month.label === bdaymonth;
})}