如何在react-datepicker的isClearable操作时调用自定义函数？

你之前的错误在于isClearable是布尔类型属性，它仅用于控制是否显示清除图标，不能直接绑定点击回调函数。要实现点击清除图标时调用自定义函数，需要使用react-datepicker提供的onClear属性。

正确代码示例： #

保留你的自定义函数不变：

const testFun = () => {
    console.log("Function calling works on isClearable"); 
    anotherFunCall();
}

修改DatePicker组件的属性配置：

<DatePicker
    selected={monthYear}
    dateFormat="yyyy/MM"
    maxDate={new Date()}
    onChange={(date) => {
        setMonthYear(date);
        setHide1(false);
    }}
    // 绑定清除事件回调
    onClear={() => {
        testFun();
        // 按需重置状态，比如清空选中日期
        setMonthYear(null);
        setHide1(true); // 根据业务需求调整UI状态
    }}
    placeholderText="YYYY-MM"
    showMonthYearPicker
    dropdownMode="select"
    // 开启清除按钮显示
    isClearable={true}
/>

关键说明： #

• isClearable={true}：这是启用清除按钮的基础配置，必须设为布尔值true才会显示清除图标。
• onClear：组件内置的清除事件属性，点击清除图标时会触发该回调函数。你可以在这里直接调用自定义的testFun，同时根据业务需求完成状态重置操作。

内容的提问来源于stack exchange，提问作者jeetu gupta