[英]react-select inside react-dates doesn't update select value
I'm using react-dates for a simple birthday picker.我正在使用 react-dates 作为一个简单的生日选择器。 I'm using the
renderMonthElement
prop to render 2 selects on top of the datepicker for months and years:我正在使用
renderMonthElement
道具在日期选择器顶部呈现 2 个选择数月和数年:
Whenever I select a month, the calendar updates correctly however the value shown in the react-select component doesn't update.每当我一个月 select 时,日历都会正确更新,但是 react-select 组件中显示的值不会更新。
My Select looks like this:我的 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)
}}
/>
as soon as I take it out of the renderMonthElement
, it works perfectly fine by either using bdaymonth from state
or just directly with months.label
一旦我将它从
renderMonthElement
中取出,它可以通过使用bdaymonth from state
或直接使用months.label
来完美运行
I thought it might have something to do with the SingleDatePicker being rendered in a Portal but even if I render it inline, the issue persists.我认为这可能与在 Portal 中呈现的 SingleDatePicker 有关,但即使我将其呈现为内联,问题仍然存在。
Here is the complete code of my renderMonthElement (pretty much stolen from https://stackoverflow.com/a/57666932/6118046 ):这是我的 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>
)
}
Got it working by changing the value of the Select to通过将 Select 的值更改为
value={months.filter(function(month) {
return month.label === bdaymonth;
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.