From 985b81e2fb23d2b4bd338a92eff410f7e4e7618a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 12 Sep 2018 17:03:29 +0800
Subject: [PATCH] using onValuesChange instead of binding onChange to every
 form item

close #2196
---
 src/pages/List/Applications.js | 47 ++++++++++++----------------------
 src/pages/List/Articles.js     | 19 +++++++++++---
 src/pages/List/List.js         |  7 ++++-
 src/pages/List/Projects.js     | 37 +++++++++++---------------
 4 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/src/pages/List/Applications.js b/src/pages/List/Applications.js
index 62d46743..7b317d9a 100644
--- a/src/pages/List/Applications.js
+++ b/src/pages/List/Applications.js
@@ -12,11 +12,24 @@ import styles from './Applications.less';
 const { Option } = Select;
 const FormItem = Form.Item;
 
-@Form.create()
 @connect(({ list, loading }) => ({
   list,
   loading: loading.models.list,
 }))
+@Form.create({
+  onValuesChange({ dispatch }, values) {
+    // 表单项变化时请求数据
+    // eslint-disable-next-line
+    console.log(values);
+    // 模拟查询表单生效
+    dispatch({
+      type: 'list/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  },
+})
 class FilterCardList extends PureComponent {
   componentDidMount() {
     const { dispatch } = this.props;
@@ -28,24 +41,6 @@ class FilterCardList extends PureComponent {
     });
   }
 
-  handleFormSubmit = () => {
-    const { form, dispatch } = this.props;
-    // setTimeout 用于保证获取表单值是在所有表单字段更新完毕的时候
-    setTimeout(() => {
-      form.validateFields(err => {
-        if (!err) {
-          // eslint-disable-next-line
-          dispatch({
-            type: 'list/fetch',
-            payload: {
-              count: 8,
-            },
-          });
-        }
-      });
-    }, 0);
-  };
-
   render() {
     const {
       list: { list },
@@ -101,7 +96,7 @@ class FilterCardList extends PureComponent {
             <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
               <FormItem>
                 {getFieldDecorator('category')(
-                  <TagSelect onChange={this.handleFormSubmit} expandable>
+                  <TagSelect expandable>
                     <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                     <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                     <TagSelect.Option value="cat3">类目三</TagSelect.Option>
@@ -123,11 +118,7 @@ class FilterCardList extends PureComponent {
                 <Col lg={8} md={10} sm={10} xs={24}>
                   <FormItem {...formItemLayout} label="作者">
                     {getFieldDecorator('author', {})(
-                      <Select
-                        onChange={this.handleFormSubmit}
-                        placeholder="不限"
-                        style={{ maxWidth: 200, width: '100%' }}
-                      >
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
                         <Option value="lisa">王昭君</Option>
                       </Select>
                     )}
@@ -136,11 +127,7 @@ class FilterCardList extends PureComponent {
                 <Col lg={8} md={10} sm={10} xs={24}>
                   <FormItem {...formItemLayout} label="好评度">
                     {getFieldDecorator('rate', {})(
-                      <Select
-                        onChange={this.handleFormSubmit}
-                        placeholder="不限"
-                        style={{ maxWidth: 200, width: '100%' }}
-                      >
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
                         <Option value="good">优秀</Option>
                         <Option value="normal">普通</Option>
                       </Select>
diff --git a/src/pages/List/Articles.js b/src/pages/List/Articles.js
index 815e79cc..fdf4902b 100644
--- a/src/pages/List/Articles.js
+++ b/src/pages/List/Articles.js
@@ -12,11 +12,24 @@ const FormItem = Form.Item;
 
 const pageSize = 5;
 
-@Form.create()
 @connect(({ list, loading }) => ({
   list,
   loading: loading.models.list,
 }))
+@Form.create({
+  onValuesChange({ dispatch }, values) {
+    // 表单项变化时请求数据
+    // eslint-disable-next-line
+    console.log(values);
+    // 模拟查询表单生效
+    dispatch({
+      type: 'list/fetch',
+      payload: {
+        count: 5,
+      },
+    });
+  },
+})
 class SearchList extends Component {
   componentDidMount() {
     const { dispatch } = this.props;
@@ -125,7 +138,7 @@ class SearchList extends Component {
             <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
               <FormItem>
                 {getFieldDecorator('category')(
-                  <TagSelect onChange={this.handleFormSubmit} expandable>
+                  <TagSelect expandable>
                     <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                     <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                     <TagSelect.Option value="cat3">类目三</TagSelect.Option>
@@ -174,7 +187,6 @@ class SearchList extends Component {
                   <FormItem {...formItemLayout} label="活跃用户">
                     {getFieldDecorator('user', {})(
                       <Select
-                        onChange={this.handleFormSubmit}
                         placeholder="不限"
                         style={{ maxWidth: 200, width: '100%' }}
                       >
@@ -187,7 +199,6 @@ class SearchList extends Component {
                   <FormItem {...formItemLayout} label="好评度">
                     {getFieldDecorator('rate', {})(
                       <Select
-                        onChange={this.handleFormSubmit}
                         placeholder="不限"
                         style={{ maxWidth: 200, width: '100%' }}
                       >
diff --git a/src/pages/List/List.js b/src/pages/List/List.js
index 18ac7569..9483e3d9 100644
--- a/src/pages/List/List.js
+++ b/src/pages/List/List.js
@@ -21,7 +21,12 @@ class SearchList extends Component {
       default:
         break;
     }
-  };
+  }
+
+  handleFormSubmit = (value) => {
+    // eslint-disable-next-line
+    console.log(value);
+  }
 
   render() {
     const tabList = [
diff --git a/src/pages/List/Projects.js b/src/pages/List/Projects.js
index e2821754..9bffa57e 100644
--- a/src/pages/List/Projects.js
+++ b/src/pages/List/Projects.js
@@ -15,11 +15,24 @@ const FormItem = Form.Item;
 
 /* eslint react/no-array-index-key: 0 */
 
-@Form.create()
 @connect(({ list, loading }) => ({
   list,
   loading: loading.models.list,
 }))
+@Form.create({
+  onValuesChange({ dispatch }, values) {
+    // 表单项变化时请求数据
+    // eslint-disable-next-line
+    console.log(values);
+    // 模拟查询表单生效
+    dispatch({
+      type: 'list/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  },
+})
 class CoverCardList extends PureComponent {
   componentDidMount() {
     const { dispatch } = this.props;
@@ -31,24 +44,6 @@ class CoverCardList extends PureComponent {
     });
   }
 
-  handleFormSubmit = () => {
-    const { form, dispatch } = this.props;
-    // setTimeout 用于保证获取表单值是在所有表单字段更新完毕的时候
-    setTimeout(() => {
-      form.validateFields(err => {
-        if (!err) {
-          // eslint-disable-next-line
-          dispatch({
-            type: 'list/fetch',
-            payload: {
-              count: 8,
-            },
-          });
-        }
-      });
-    }, 0);
-  };
-
   render() {
     const {
       list: { list = [] },
@@ -108,7 +103,7 @@ class CoverCardList extends PureComponent {
             <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
               <FormItem>
                 {getFieldDecorator('category')(
-                  <TagSelect onChange={this.handleFormSubmit} expandable>
+                  <TagSelect expandable>
                     <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                     <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                     <TagSelect.Option value="cat3">类目三</TagSelect.Option>
@@ -131,7 +126,6 @@ class CoverCardList extends PureComponent {
                   <FormItem {...formItemLayout} label="作者">
                     {getFieldDecorator('author', {})(
                       <Select
-                        onChange={this.handleFormSubmit}
                         placeholder="不限"
                         style={{ maxWidth: 200, width: '100%' }}
                       >
@@ -144,7 +138,6 @@ class CoverCardList extends PureComponent {
                   <FormItem {...formItemLayout} label="好评度">
                     {getFieldDecorator('rate', {})(
                       <Select
-                        onChange={this.handleFormSubmit}
                         placeholder="不限"
                         style={{ maxWidth: 200, width: '100%' }}
                       >
-- 
GitLab