单击十字图标无法清除 flatpickr 选择的日期
unable to clear flatpickr selected date on click of cross icon
我正在尝试使用 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()}/>
<>
我不确定是我用错了还是遗漏了什么,如果有人能提供帮助就太好了。
提前致谢!!
使用 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 中可用的清晰功能,但在 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()}/>
<>
我不确定是我用错了还是遗漏了什么,如果有人能提供帮助就太好了。 提前致谢!!
使用 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}/>
<>