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;
})}