单击十字图标时无法清除flatpacker选定的日期

Question

我正在尝试使用flatpaickr中提供的clear功能，但在react flatpackr中使用它时遇到了问题。我的用例非常简单，我添加了一个svg交叉图标，点击该图标后，我想在flatpaickr输入字段中清除所选日期。

const element = document.querySelector("[class=flatpickr-input]")
<>
<img src={calendar} alt="calendar" className={'flat-calendar'} data-testid={'flat-calendar-icon'}/>
<Flatpickr options={config} value={value && new Date(value)} onChange={(eventValue) => localOnChange(eventValue[0])}/>
<img src={crossFilled} alt="calendar" className={'clear-icon'} onClick={() => element.clear()}/>
<>

我不确定我是用错了还是遗漏了什么，如果有人能帮我，那就太好了。提前感谢！！

Answer 1

使用React refs使其工作。使用React refs和flatpacker ref.上的调用clear创建了flatpacker的引用

const refComp = useRef(null);
const clearDate = () => {
refComp.current.flatpickr.clear();
}
<>
<img src={calendar} alt="calendar" className={'flat-calendar'} data-testid={'flat-calendar-icon'}/>
<Flatpickr options={config} value={value && new Date(value)} onChange={(eventValue) => localOnChange(eventValue[0])} ref={refComp}/>
<img src={crossFilled} alt="calendar" className={'clear-icon'} onClick={clearDate}/>
<>