繁体   English   中英

为 airbnb SingleDatePicker 制作下拉选择器日期

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM