如何擴展 React 組件的 prop 的默認行為？

Question

您好，我的表格組件取自 ant 設計的表格，我想更改更改當前頁面時發生的情況。

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 function onChange: e => setCurrentPage(e) ，默認行為被忽略。 有沒有辦法擴展默認的 onChange，然后將我當前的setCurrentPage(e)添加到它？

Answer 1

我一直在查看 antd 上的Table和Pagination實現，沒有證據可以解釋為什么添加onChange會阻止默認行為。

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

我也一直在玩 antd 文檔提供的Table示例，我在其中添加了一個onChange句柄，過濾行為保持不變。

嘗試隔離代碼並提供更多信息 - 這樣我們可以更好地幫助您。