如何在 AntD Date range Picker 底部添加 Apply 按钮，以运行 API 调用？答案

【问题标题】：How to add Apply button to bottom of AntD Date ranger Picker, to run an API call?如何在 AntD Date range Picker 底部添加 Apply 按钮，以运行 API 调用？
【发布时间】：2021-05-21 07:50:57
【问题描述】：

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

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

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

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

【问题讨论】：

你需要检查文档是否提供按钮

标签： reactjs antd react-daterange-picker

【解决方案1】：

您应该可以使用renderExtraFooter 功能。

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

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

【讨论】：