reactjs - 如何在 AntD Date ranger Picker 底部添加 Apply 按钮以运行 API 调用？

Question

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

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

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

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

Answer 1

您应该能够使用该renderExtraFooter功能。

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

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