[英]making a dropdown selector date for airbnb SingleDatePicker
我的设置是这样的,我绝对是在挤压图书馆外部可能的极限:
const [customDate, setCustomDate] = useState(moment());
const [focused, setFocused] = useState(false);)
const onDropDownChangeMonth = ()=>{
setCustomDate(moment('07-12-2020', dateFormat.MM_DD_YYYY));
setFocused(true);
}
<SingleDatePicker
date={customDate}
onDateChange={onDateChange}
focused={focused}
placeholder={props.placeholder}
onFocusChange={(e) => {
setFocused(e.focused);
}}
navPrev={<div></div>}
navNext={<div></div>}
keepFocusOnInput={true}
renderMonthText={() => (
<div style={{ display: 'flex', flexDirection: 'row' }}>
<select style={{ border: 'none', background: '#ffffff' }} onChange={onDropDownChangeMonth}>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
)}
/>
所以,我目前的实现给了我这样的正确结果:
因为,这会重新渲染,我想保持打开状态(我可以忍受闪烁),日期更改,日历更改,日历保持打开状态,但是,他们呈现空白的孩子:
只有当我手动散焦并重新打开时,日历才会呈现,并且我会看到反映的更改。 如何让日历呈现? 如何使它不必手动散焦,我不介意闪烁。
顺便说一句:我正在使用SingleDatePicker
的 SingleDatePicker
好吧,对于那些不介意眨眼而不是闪烁的人来说,这是一个可能的解决方案(请阅读上面的问题)。 这是一个笨拙的解决方案,在我的情况下它没有多大用处,只是在这里注意可能对此没有意见的人,或者知道如何将这种闪烁减少到闪烁或什么都不做的人:
put this in the `onDropDownChangeMonth`:
const onDropDownChangeMonth = ()=>{
setCustomDate(moment('07-12-2020', dateFormat.MM_DD_YYYY));
setFocused(false);
setTimeout(()=>setFocused(true), 1);
}
即使我设置了 1 毫秒的超时时间,重新渲染的延迟也大约是 1 秒,这对我来说并不好。 . 请提及任何减少或摆脱延迟重新渲染的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.