如何将应用按钮添加到 AntD 日期范围选择器的底部,以 运行 和 API 调用?

How to add Apply button to bottom of AntD Date ranger Picker, to run an API call?

我的报告中有一个范围选择器 select 开始和结束日期。一旦日期范围 selected (onchange),它将调用 API 并获取数据。但是当用户想要 select 另一个日期范围时,它会调用 API 只更改一个日期。

如何将“确定”或“应用”按钮添加到范围选择器以提供 API 调用而不是更改日期。范围选择器现在实现如下。

<RangePicker
   format="YYYY-MM-DD"
   onChange={onChange}
   disabledDate={(currentDate) => currentDate.isAfter(moment())}
/>

function onChange(value, dateString) {
/**fetch API**/  }

您应该可以使用 renderExtraFooter 功能。

我没有测试过这段代码,所以它可能有错误,但类似于:

<RangePicker
   format="YYYY-MM-DD"
   renderExtraFooter={() => <Button onClick={onChange}>Apply</Button>}
   disabledDate={(currentDate) => currentDate.isAfter(moment())}
/>