react-dates 中的 react-select 不会更新选择值答案

【问题标题】：react-select inside react-dates doesn't update select valuereact-dates 中的 react-select 不会更新选择值
【发布时间】：2021-11-25 03:06:57
【问题描述】：

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

每当我选择一个月时，日历都会正确更新，但是 react-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>
    )
  }

【问题讨论】：

标签： react-select react-dates

【解决方案1】：

通过将 Select 的值更改为使其工作

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

【讨论】：