Przeglądaj źródła

分页器受控模式

narro 6 lat temu
rodzic
commit
d2c6e51b95

+ 4
- 0
CHANGELOG.md Wyświetl plik

@@ -1,5 +1,9 @@
1 1
 # CHANGELOG
2 2
 
3
+## 0.5.12
4
+- [x] 支持两种模式的分页器
5
+- [x] 分页器支持受控模式
6
+
3 7
 ## 0.5.11
4 8
 - [x] 增加链接解析功能
5 9
 

+ 18
- 16
README.md Wyświetl plik

@@ -2,7 +2,7 @@
2 2
 
3 3
 通用评论系统及编辑器
4 4
 
5
-**`version 0.5.11`**
5
+**`version 0.5.12`**
6 6
 
7 7
 ```js
8 8
 import Comment, { Editor, RenderText } from 'comment';
@@ -13,21 +13,23 @@ import Comment, { Editor, RenderText } from 'comment';
13 13
 ## Comment
14 14
 
15 15
 
16
-| props            | type          | default                            | required | description                                                                       |
17
-| ---------------- | ------------- | ---------------------------------- | -------- | --------------------------------------------------------------------------------- |
18
-| type             | number        |                                    | true     | 评论的 type                                                                       |
19
-| businessId       | string        |                                    | true     | 评论的 business id                                                                |
20
-| API              | string        | http://api.links123.net/comment/v1 | false    | API 前缀                                                                          |
21
-| showList         | boolean       | true                               | false    | 是否显示评论列表                                                                  |
22
-| showEditor       | boolean       | true                               | false    | 是否显示评论输入框                                                                |
23
-| showAlertComment | boolean       | false                              | false    | 评论成功之后,是否通过 Antd 的 Message 组件进行提示                               |
24
-| showAlertReply   | boolean       | false                              | false    | 回复成功之后,是否通过 Antd 的 Message 组件进行提示                               |
25
-| showAlertFavor   | boolean       | false                              | false    | 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示                      |
26
-| showError        | boolean       | true                               | false    | 是否使用Antd的Message组件提示错误信息                                             |
27
-| onError          | function(msg) |                                    | false    | 错误回调, 出错了会被调用                                                          |
28
-| userId           | number        |                                    | false    | 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮 |
29
-| token            | string        |                                    | false    | [deprecated] token,用于身份认证,非必须。默认使用 cookie                         |
30
-| pageType         | string        | more                               | false    | 分页类别, more-加载更多 pagination-页码                                          |
16
+| props            | type           | default                            | required | description                                                                       |
17
+| ---------------- | -------------- | ---------------------------------- | -------- | --------------------------------------------------------------------------------- |
18
+| type             | number         |                                    | true     | 评论的 type                                                                       |
19
+| businessId       | string         |                                    | true     | 评论的 business id                                                                |
20
+| API              | string         | http://api.links123.net/comment/v1 | false    | API 前缀                                                                          |
21
+| showList         | boolean        | true                               | false    | 是否显示评论列表                                                                  |
22
+| showEditor       | boolean        | true                               | false    | 是否显示评论输入框                                                                |
23
+| showAlertComment | boolean        | false                              | false    | 评论成功之后,是否通过 Antd 的 Message 组件进行提示                               |
24
+| showAlertReply   | boolean        | false                              | false    | 回复成功之后,是否通过 Antd 的 Message 组件进行提示                               |
25
+| showAlertFavor   | boolean        | false                              | false    | 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示                      |
26
+| showError        | boolean        | true                               | false    | 是否使用Antd的Message组件提示错误信息                                             |
27
+| onError          | function(msg)  |                                    | false    | 错误回调, 出错了会被调用                                                          |
28
+| userId           | number         |                                    | false    | 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮 |
29
+| token            | string         |                                    | false    | [deprecated] token,用于身份认证,非必须。默认使用 cookie                         |
30
+| pageType         | string         | more                               | false    | 分页类别, more-加载更多 pagination-页码                                          |
31
+| page             | number         |                                    | false    | 页码受控模式,如果传递了此参数,则需要通过onPageChange回调手动维护page.             |
32
+| onPageChange     | function(page) |                                    | false    | 页码发生变化时的回调,注意:分页数据获取还是在组件内部处理的                        |
31 33
 
32 34
 
33 35
 ## Editor

+ 2
- 2
lib/App.css Wyświetl plik

@@ -4,7 +4,7 @@
4 4
   margin-bottom: 100px;
5 5
 }
6 6
 
7
-.comment .ant-spin-nested-loading>div>.ant-spin .ant-spin-dot {
7
+.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
8 8
   position: fixed;
9 9
   top: 45%;
10 10
 }
@@ -27,4 +27,4 @@
27 27
 
28 28
 .comment-img {
29 29
   max-width: 100%;
30
-}
30
+}

+ 7
- 4
lib/App.js Wyświetl plik

@@ -182,7 +182,7 @@ var App = function (_Component) {
182 182
           var newList = list;
183 183
           var oldList = _this2.state.list;
184 184
 
185
-          if (pageType === 'more') {
185
+          if (pageType === "more") {
186 186
             if (page > 1) {
187 187
               // 删除临时数据
188 188
               oldList = oldList.filter(function (o) {
@@ -190,7 +190,7 @@ var App = function (_Component) {
190 190
               });
191 191
               newList = oldList.concat(newList);
192 192
             }
193
-          } else if (pageType === 'pagination') {
193
+          } else if (pageType === "pagination") {
194 194
             // TODO 滚动到顶部
195 195
             window.scrollTo(0, 0);
196 196
           }
@@ -563,7 +563,9 @@ App.propTypes = {
563 563
   showError: _propTypes2.default.bool, // 是否使用Antd的Message组件提示错误信息
564 564
   onError: _propTypes2.default.func, // 错误回调, 出错了会被调用
565 565
   userId: _propTypes2.default.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
566
-  pageType: _propTypes2.default.string // 分页类型
566
+  pageType: _propTypes2.default.string, // 分页类型
567
+  page: _propTypes2.default.number, // 页码
568
+  onPageChange: _propTypes2.default.func // 页码变化回调
567 569
 };
568 570
 
569 571
 App.defaultProps = {
@@ -574,7 +576,8 @@ App.defaultProps = {
574 576
   showAlertReply: false,
575 577
   showAlertFavor: false,
576 578
   showError: true,
577
-  pageType: "more"
579
+  pageType: "more",
580
+  onPageChange: function onPageChange(page) {}
578 581
 };
579 582
 
580 583
 exports.Editor = _Editor2.default;

+ 1
- 1
lib/App.js.map
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
lib/components/CommentList/index.css Wyświetl plik

@@ -16,4 +16,4 @@
16 16
 
17 17
 .comment-list-pagination {
18 18
   text-align: center;
19
-}
19
+}

+ 8
- 5
lib/components/CommentList/index.js Wyświetl plik

@@ -57,7 +57,7 @@ var CommentList = function (_Component) {
57 57
   _createClass(CommentList, [{
58 58
     key: "componentWillMount",
59 59
     value: function componentWillMount() {
60
-      this.props.app.sGetComment();
60
+      this.props.app.sGetComment({ page: this.props.app.page });
61 61
     }
62 62
   }, {
63 63
     key: "renderPagination",
@@ -68,16 +68,18 @@ var CommentList = function (_Component) {
68 68
           page = _props$app.page,
69 69
           pageType = _props$app.pageType,
70 70
           isNoMoreComment = _props$app.isNoMoreComment,
71
-          sGetComment = _props$app.sGetComment;
71
+          sGetComment = _props$app.sGetComment,
72
+          onPageChange = _props$app.onPageChange;
72 73
 
73
-      if (pageType === 'more') {
74
+      if (pageType === "more") {
74 75
         if (!isNoMoreComment && list.length !== total) {
75 76
           return _react2.default.createElement(
76 77
             "div",
77 78
             {
78 79
               className: "comment-list-show-more",
79 80
               onClick: function onClick() {
80
-                return sGetComment({ page: page + 1 });
81
+                sGetComment({ page: page + 1 });
82
+                onPageChange(page + 1);
81 83
               }
82 84
             },
83 85
             _react2.default.createElement(
@@ -89,7 +91,7 @@ var CommentList = function (_Component) {
89 91
         } else {
90 92
           return null;
91 93
         }
92
-      } else if (pageType === 'pagination') {
94
+      } else if (pageType === "pagination") {
93 95
         return _react2.default.createElement(
94 96
           "div",
95 97
           { className: "comment-list-pagination" },
@@ -99,6 +101,7 @@ var CommentList = function (_Component) {
99 101
             total: total,
100 102
             onChange: function onChange(p) {
101 103
               sGetComment({ page: p });
104
+              onPageChange(p);
102 105
             }
103 106
           })
104 107
         );

+ 1
- 1
lib/components/CommentList/index.js.map Wyświetl plik

@@ -1 +1 @@
1
-{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","total","page","pageType","isNoMoreComment","length","LIMIT","p","loading","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","renderPagination","Component","propTypes"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;uCAEkB;AAAA,uBAQb,KAAKH,KAAL,CAAWE,GARE;AAAA,UAEfE,IAFe,cAEfA,IAFe;AAAA,UAGfC,KAHe,cAGfA,KAHe;AAAA,UAIfC,IAJe,cAIfA,IAJe;AAAA,UAKfC,QALe,cAKfA,QALe;AAAA,UAMfC,eANe,cAMfA,eANe;AAAA,UAOfL,WAPe,cAOfA,WAPe;;AASjB,UAAII,aAAa,MAAjB,EAAyB;AACvB,YAAI,CAACC,eAAD,IAAoBJ,KAAKK,MAAL,KAAgBJ,KAAxC,EAA+C;AAC7C,iBACE;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS;AAAA,uBAAMF,YAAY,EAAEG,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF,WADF;AAQD,SATD,MASO;AACL,iBAAO,IAAP;AACD;AACF,OAbD,MAaO,IAAIC,aAAa,YAAjB,EAA+B;AACpC,eACE;AAAA;AAAA,YAAK,WAAU,yBAAf;AACE;AACE,sBAAUG,eADZ;AAEE,qBAASJ,IAFX;AAGE,mBAAOD,KAHT;AAIE,sBAAU,kBAACM,CAAD,EAAO;AACfR,0BAAY,EAAEG,MAAMK,CAAR,EAAZ;AACD;AANH;AADF,SADF;AAYD;AACF;;;6BAEQ;AAAA,wBAKH,KAAKX,KAAL,CAAWE,GALR;AAAA,UAELE,IAFK,eAELA,IAFK;AAAA,UAGLC,KAHK,eAGLA,KAHK;AAAA,UAILO,OAJK,eAILA,OAJK;;;AAOP,UAAMC,WAAWC,QACfF,QAAQT,WAAR,IAAuBS,QAAQG,aAA/B,IAAgDH,QAAQI,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQR,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKa,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAMI,eAAKC,gBAAL;AANJ;AADF,OADF;AAaD;;;;EAvEuBC,gB;;AA0E1BtB,YAAYuB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQvB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { Spin, Pagination } from \"antd\";\r\nimport Comment from \"../../Comment\";\r\nimport CommentBox from \"../CommentBox\";\r\nimport \"./index.css\";\r\nimport { LIMIT } from \"../../constant\";\r\n\r\nclass CommentList extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  componentWillMount() {\r\n    this.props.app.sGetComment();\r\n  }\r\n\r\n  renderPagination() {\r\n    const {\r\n      list,\r\n      total,\r\n      page,\r\n      pageType,\r\n      isNoMoreComment,\r\n      sGetComment\r\n    } = this.props.app;\r\n    if (pageType === 'more') {\r\n      if (!isNoMoreComment && list.length !== total) {\r\n        return (\r\n          <div\r\n            className=\"comment-list-show-more\"\r\n            onClick={() => sGetComment({ page: page + 1 })}\r\n          >\r\n            <span>查看更多评论</span>\r\n          </div>\r\n        );\r\n      } else {\r\n        return null;\r\n      }\r\n    } else if (pageType === 'pagination') {\r\n      return (\r\n        <div className=\"comment-list-pagination\">\r\n          <Pagination\r\n            pageSize={LIMIT}\r\n            current={page}\r\n            total={total}\r\n            onChange={(p) => {\r\n              sGetComment({ page: p })\r\n            }}\r\n          />\r\n        </div>\r\n      )\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      list,\r\n      total,\r\n      loading,\r\n    } = this.props.app;\r\n\r\n    const spinning = Boolean(\r\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\r\n    );\r\n    return (\r\n      <div>\r\n        <Spin spinning={spinning}>\r\n          <div>共 {total} 条评论</div>\r\n          {list.map(item => (\r\n            <CommentBox content={item} key={item.id} commentId={item.id} />\r\n          ))}\r\n          {\r\n            this.renderPagination()\r\n          }\r\n        </Spin>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nCommentList.propTypes = {};\r\n\r\nexport default Comment(CommentList);\r\n"]}
1
+{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","page","list","total","pageType","isNoMoreComment","onPageChange","length","LIMIT","p","loading","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","renderPagination","Component","propTypes"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf,CAA2B,EAAEC,MAAM,KAAKJ,KAAL,CAAWE,GAAX,CAAeE,IAAvB,EAA3B;AACD;;;uCAEkB;AAAA,uBASb,KAAKJ,KAAL,CAAWE,GATE;AAAA,UAEfG,IAFe,cAEfA,IAFe;AAAA,UAGfC,KAHe,cAGfA,KAHe;AAAA,UAIfF,IAJe,cAIfA,IAJe;AAAA,UAKfG,QALe,cAKfA,QALe;AAAA,UAMfC,eANe,cAMfA,eANe;AAAA,UAOfL,WAPe,cAOfA,WAPe;AAAA,UAQfM,YARe,cAQfA,YARe;;AAUjB,UAAIF,aAAa,MAAjB,EAAyB;AACvB,YAAI,CAACC,eAAD,IAAoBH,KAAKK,MAAL,KAAgBJ,KAAxC,EAA+C;AAC7C,iBACE;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS,mBAAM;AACbH,4BAAY,EAAEC,MAAMA,OAAO,CAAf,EAAZ;AACAK,6BAAaL,OAAO,CAApB;AACD;AALH;AAQE;AAAA;AAAA;AAAA;AAAA;AARF,WADF;AAYD,SAbD,MAaO;AACL,iBAAO,IAAP;AACD;AACF,OAjBD,MAiBO,IAAIG,aAAa,YAAjB,EAA+B;AACpC,eACE;AAAA;AAAA,YAAK,WAAU,yBAAf;AACE;AACE,sBAAUI,eADZ;AAEE,qBAASP,IAFX;AAGE,mBAAOE,KAHT;AAIE,sBAAU,qBAAK;AACbH,0BAAY,EAAEC,MAAMQ,CAAR,EAAZ;AACAH,2BAAaG,CAAb;AACD;AAPH;AADF,SADF;AAaD;AACF;;;6BAEQ;AAAA,wBAC0B,KAAKZ,KAAL,CAAWE,GADrC;AAAA,UACCG,IADD,eACCA,IADD;AAAA,UACOC,KADP,eACOA,KADP;AAAA,UACcO,OADd,eACcA,OADd;;;AAGP,UAAMC,WAAWC,QACfF,QAAQV,WAAR,IAAuBU,QAAQG,aAA/B,IAAgDH,QAAQI,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQR,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKa,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAKG,eAAKC,gBAAL;AALH;AADF,OADF;AAWD;;;;EAvEuBC,gB;;AA0E1BvB,YAAYwB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQxB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { Spin, Pagination } from \"antd\";\r\nimport Comment from \"../../Comment\";\r\nimport CommentBox from \"../CommentBox\";\r\nimport \"./index.css\";\r\nimport { LIMIT } from \"../../constant\";\r\n\r\nclass CommentList extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  componentWillMount() {\r\n    this.props.app.sGetComment({ page: this.props.app.page });\r\n  }\r\n\r\n  renderPagination() {\r\n    const {\r\n      list,\r\n      total,\r\n      page,\r\n      pageType,\r\n      isNoMoreComment,\r\n      sGetComment,\r\n      onPageChange,\r\n    } = this.props.app;\r\n    if (pageType === \"more\") {\r\n      if (!isNoMoreComment && list.length !== total) {\r\n        return (\r\n          <div\r\n            className=\"comment-list-show-more\"\r\n            onClick={() => {\r\n              sGetComment({ page: page + 1 })\r\n              onPageChange(page + 1);\r\n            }\r\n            }\r\n          >\r\n            <span>查看更多评论</span>\r\n          </div>\r\n        );\r\n      } else {\r\n        return null;\r\n      }\r\n    } else if (pageType === \"pagination\") {\r\n      return (\r\n        <div className=\"comment-list-pagination\">\r\n          <Pagination\r\n            pageSize={LIMIT}\r\n            current={page}\r\n            total={total}\r\n            onChange={p => {\r\n              sGetComment({ page: p });\r\n              onPageChange(p);\r\n            }}\r\n          />\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const { list, total, loading } = this.props.app;\r\n\r\n    const spinning = Boolean(\r\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\r\n    );\r\n    return (\r\n      <div>\r\n        <Spin spinning={spinning}>\r\n          <div>共 {total} 条评论</div>\r\n          {list.map(item => (\r\n            <CommentBox content={item} key={item.id} commentId={item.id} />\r\n          ))}\r\n          {this.renderPagination()}\r\n        </Spin>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nCommentList.propTypes = {};\r\n\r\nexport default Comment(CommentList);\r\n"]}

+ 1
- 1
lib/components/ContentItem/index.css Wyświetl plik

@@ -71,4 +71,4 @@
71 71
     width: 75%;
72 72
     margin-left: 10px;
73 73
   }
74
-}
74
+}

+ 1
- 5
lib/components/ContentItem/index.js Wyświetl plik

@@ -196,11 +196,7 @@ var CommentItem = function (_Component) {
196 196
                   rel: "noopener noreferrer",
197 197
                   key: index
198 198
                 },
199
-                _react2.default.createElement("img", {
200
-                  src: item,
201
-                  alt: item,
202
-                  className: "comment-img"
203
-                })
199
+                _react2.default.createElement("img", { src: item, alt: item, className: "comment-img" })
204 200
               );
205 201
             })
206 202
           ),

+ 1
- 1
lib/components/ContentItem/index.js.map
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
lib/helper.js.map
Plik diff jest za duży
Wyświetl plik


+ 12
- 1
lib/index.js Wyświetl plik

@@ -39,14 +39,23 @@ var Index = function (_Component) {
39 39
     var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
40 40
 
41 41
     _this.state = {
42
+      page: 1,
42 43
       value: ""
43 44
     };
45
+    _this.onPageChange = _this.onPageChange.bind(_this);
44 46
     _this.handleChangeValue = _this.handleChangeValue.bind(_this);
45 47
     _this.handleChangeSubmit = _this.handleChangeSubmit.bind(_this);
46 48
     return _this;
47 49
   }
48 50
 
49 51
   _createClass(Index, [{
52
+    key: "onPageChange",
53
+    value: function onPageChange(page) {
54
+      this.setState({
55
+        page: page
56
+      });
57
+    }
58
+  }, {
50 59
     key: "handleChangeValue",
51 60
     value: function handleChangeValue(value) {
52 61
       this.setState({ value: value });
@@ -82,7 +91,9 @@ var Index = function (_Component) {
82 91
           showAlertFavor: true,
83 92
           showError: false,
84 93
           userId: 71299,
85
-          pageType: "pagination",
94
+          page: this.state.page,
95
+          onPageChange: this.onPageChange,
96
+          pageType: "more",
86 97
           onError: function onError(msg, _ref2) {
87 98
             var response = _ref2.response;
88 99
 

+ 1
- 1
lib/index.js.map
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
package.json Wyświetl plik

@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "comment",
3
-  "version": "0.5.11",
3
+  "version": "0.5.12",
4 4
   "main": "lib/App.js",
5 5
   "description": "通用评论",
6 6
   "keywords": [

+ 5
- 2
src/App.js Wyświetl plik

@@ -437,7 +437,9 @@ App.propTypes = {
437 437
   showError: PropTypes.bool, // 是否使用Antd的Message组件提示错误信息
438 438
   onError: PropTypes.func, // 错误回调, 出错了会被调用
439 439
   userId: PropTypes.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
440
-  pageType: PropTypes.string // 分页类型
440
+  pageType: PropTypes.string, // 分页类型
441
+  page: PropTypes.number, // 页码
442
+  onPageChange: PropTypes.func // 页码变化回调
441 443
 };
442 444
 
443 445
 App.defaultProps = {
@@ -448,7 +450,8 @@ App.defaultProps = {
448 450
   showAlertReply: false,
449 451
   showAlertFavor: false,
450 452
   showError: true,
451
-  pageType: "more"
453
+  pageType: "more",
454
+  onPageChange: page => {}
452 455
 };
453 456
 
454 457
 export { Editor, RenderText };

+ 8
- 3
src/components/CommentList/index.js Wyświetl plik

@@ -12,7 +12,7 @@ class CommentList extends Component {
12 12
   }
13 13
 
14 14
   componentWillMount() {
15
-    this.props.app.sGetComment();
15
+    this.props.app.sGetComment({ page: this.props.app.page });
16 16
   }
17 17
 
18 18
   renderPagination() {
@@ -22,14 +22,18 @@ class CommentList extends Component {
22 22
       page,
23 23
       pageType,
24 24
       isNoMoreComment,
25
-      sGetComment
25
+      sGetComment,
26
+      onPageChange
26 27
     } = this.props.app;
27 28
     if (pageType === "more") {
28 29
       if (!isNoMoreComment && list.length !== total) {
29 30
         return (
30 31
           <div
31 32
             className="comment-list-show-more"
32
-            onClick={() => sGetComment({ page: page + 1 })}
33
+            onClick={() => {
34
+              sGetComment({ page: page + 1 });
35
+              onPageChange(page + 1);
36
+            }}
33 37
           >
34 38
             <span>查看更多评论</span>
35 39
           </div>
@@ -46,6 +50,7 @@ class CommentList extends Component {
46 50
             total={total}
47 51
             onChange={p => {
48 52
               sGetComment({ page: p });
53
+              onPageChange(p);
49 54
             }}
50 55
           />
51 56
         </div>

+ 11
- 1
src/index.js Wyświetl plik

@@ -10,12 +10,20 @@ class Index extends Component {
10 10
   constructor(props) {
11 11
     super(props);
12 12
     this.state = {
13
+      page: 1,
13 14
       value: ""
14 15
     };
16
+    this.onPageChange = this.onPageChange.bind(this);
15 17
     this.handleChangeValue = this.handleChangeValue.bind(this);
16 18
     this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
17 19
   }
18 20
 
21
+  onPageChange(page) {
22
+    this.setState({
23
+      page
24
+    });
25
+  }
26
+
19 27
   handleChangeValue(value) {
20 28
     this.setState({ value });
21 29
     console.log("handleChangeValue value: ", value);
@@ -42,7 +50,9 @@ class Index extends Component {
42 50
         showAlertFavor
43 51
         showError={false}
44 52
         userId={71299}
45
-        pageType="pagination"
53
+        page={this.state.page}
54
+        onPageChange={this.onPageChange}
55
+        pageType="more"
46 56
         onError={(msg, { response }) => {
47 57
           if (response.status === 401) {
48 58
             console.log("unlogined");