chore(Pagination): improve document of pageSizeSelector, fix pageJump…

… runtime error, close #3306
alibaba-fusion · Mar 2, 2024 · d745935 · d745935
1 parent 004fa0e
commit d745935
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/components/pagination/__docs__/demo/page-size/index.md b/components/pagination/__docs__/demo/page-size/index.md
@@ -6,7 +6,8 @@
 可以通过设置 `pageSizeSelector` 属性来指定是否显示 每页数量选择 的部件以及部件形状。<br>
 可以通过设置 `pageSizeList` 属性来指定 每页显示数量 可选的值。<br>
 可以通过设置 `pageSizePosition` 属性来指定 每页显示数量选择 的部件显示在整个组件的开始位置还是结束位置。<br>
-可以通过设置 `onPageSizeChange` 属性来指定每页显示的数量变化时的回调函数。
+可以通过设置 `onPageSizeChange` 属性来指定每页显示的数量变化时的回调函数。<br>
+`pageSize` 仅支持受控模式，当设置 `pageSizeSelector` 时，需要同时设置 `pageSize`、`onPageSizeChange` 才能达到效果。
 
 # en-US order=3
 
@@ -16,4 +17,5 @@ The `Page Size` property can be set to specify the number of records on the page
 The `pageSizeSelector` property can be set to specify whether to display the number of parts selected per page and the part shape.
 The `pageSizeList` property can specify the number of records per page. <br>
 By setting the `pageSizePosition` property, you can specify whether the part selected by the display quantity per page is displayed at the beginning or end of the entire component.<br>
-The `onPageSizeChange` property can be set to specify the callback function when the number of pages displayed changes.
+The `onPageSizeChange` property can be set to specify the callback function when the number of pages displayed changes.<br>
+`pageSize` only supports controlled mode. When setting `pageSizeSelector`, you need to set `pageSize` and `onPageSizeChange` at the same time to achieve the effect.
diff --git a/components/pagination/__docs__/demo/page-size/index.tsx b/components/pagination/__docs__/demo/page-size/index.tsx
@@ -18,8 +18,13 @@ class Demo extends React.Component {
                 <Pagination pageSize={20} />
                 <h3>Hide page size selector</h3>
                 <Pagination pageSizeSelector={false} />
-                <h3>Set page size selector to 'dropdown'，and show it in the end</h3>
-                <Pagination pageSizeSelector="dropdown" pageSizePosition="end" />
+                <h3>Set page size selector to 'dropdown', and show it in the end</h3>
+                <Pagination
+                    pageSize={this.state.pageSize}
+                    onPageSizeChange={this.handleChange}
+                    pageSizeSelector="dropdown"
+                    pageSizePosition="end"
+                />
                 <h3>Use pageSizeList to specify the number of records per page.</h3>
                 <Pagination
                     pageSize={this.state.pageSize}

diff --git a/components/pagination/pagination.jsx b/components/pagination/pagination.jsx
@@ -599,7 +599,7 @@ class Pagination extends Component {
                         ? this.renderPageDisplay(currentPage, totalPage)
                         : null;
                 const pageJump =
-                    showJump && total > pageSize * pageShowCount ? this.renderPageJump(currentPage, totalPage) : null;
+                    showJump && total > pageSize * pageShowCount ? this.renderPageJump(currentPage, totalPage) : [];
                 return buildComponent(pageFirst, pageList, pageLast, pageDisplay, ...pageJump);
             }
             default: