react-select inside react-dates 不更新 select 值

Question

我正在为一个简单的生日选择器使用 react-dates。我正在使用 renderMonthElement 道具在日期选择器顶部呈现 2 selects 数月和数年：

每当我 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 的完整代码（几乎是从偷来的）：

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

react-select inside react-dates 不更新 select 值

react-select inside react-dates doesn't update select value

react-select

react-dates