如何扩展 React 组件的 prop 的默认行为？答案

【问题标题】：How to extend the default behaviour of a prop of a React component?如何扩展 React 组件的 prop 的默认行为？
【发布时间】：2021-02-21 13:18:19
【问题描述】：

您好，我的表格组件取自 ant design 的表格，我想更改您更改当前页面时发生的情况。

function DefaultTable<T extends Entity>(props: TableProps<T>): JSX.Element {
const { pagination } = props;
const [currentPage, setCurrentPage] = useState(1);
const [currentPageSize, setCurrentPageSize] = useState<number>();
return (
  <Form>
    <Table
      {...props}
      pagination={
        pagination !== false && {
          onChange: e => setCurrentPage(e),
          defaultCurrent: currentPage,
          onShowSizeChange: (_current, newSize) => setCurrentPageSize(newSize),
          pageSize: currentPageSize,
          ...pagination
        }
      }
    />
  </Form>
  );
}

但是，当我更改页面时，过滤器、排序器和其他一些配置也消失了。我认为是因为这个 onChange 函数onChange: e => setCurrentPage(e)，默认行为被忽略了。有没有办法扩展默认的onChange，然后把我现在的setCurrentPage(e)加进去？

【问题讨论】：

标签： javascript reactjs typescript antd

【解决方案1】：

我一直在关注 antd 上的 Table 和 Pagination 实现，但没有证据可以解释为什么添加 onChange 会阻止默认行为。

https://codesandbox.io/s/customized-filter-panel-antd4123-forked-1nwro?file=/index.js

我也一直在玩 antd 文档提供的 Table 示例，我在其中添加了一个 onChange 句柄，过滤行为保持不变。

尝试隔离代码并提供更多信息 - 这样我们可以更好地帮助您。

【讨论】：