单击十字图标无法清除 flatpickr 选择的日期

Question

我正在尝试使用 flatpickr 中可用的清晰功能，但在 react-flatpickr 中使用它时遇到问题。我的用例非常简单，我添加了一个 svg 十字图标，然后单击该图标我想清除 flatpickr 输入字段中的选定日期。

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 引用让它工作。使用 React refs 创建了 flatpickr 的引用，并在 flatpickr ref 上调用了 clear。

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}/>
<>

单击十字图标无法清除 flatpickr 选择的日期

unable to clear flatpickr selected date on click of cross icon

reactjs

calendar

flatpickr