Merge pull request #315 from e1emeb0t/dev

Update Form

Author: qwerty678908

dist/npm/src/form/Form.js

@@ -29,8 +29,7 @@ var Form = function (_Component) {
     var _this = _possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
 
     _this.state = {
-      fields: {},
-      fieldLength: 0
+      fields: []
     };
     return _this;
   }
@@ -45,53 +44,52 @@ var Form = function (_Component) {
   }, {
     key: 'addField',
     value: function addField(field) {
-      this.state.fields[field.props.prop] = field;
-      this.state.fieldLength++;
+      this.state.fields.push(field);
     }
   }, {
     key: 'removeField',
     value: function removeField(field) {
-      delete this.state.fields[field.props.prop];
-      this.state.fieldLength--;
+      if (field.props.prop) {
+        this.state.fields.splice(this.state.fields.indexOf(field), 1);
+      }
     }
   }, {
     key: 'resetFields',
     value: function resetFields() {
-      var fields = this.state.fields;
-
-
-      for (var key in fields) {
-        fields[key].resetField();
-      }
+      this.state.fields.forEach(function (field) {
+        field.resetField();
+      });
     }
   }, {
     key: 'validate',
     value: function validate(callback) {
-      var _state = this.state,
-          fields = _state.fields,
-          fieldLength = _state.fieldLength;
+      var _this2 = this;
 
-      var count = 0,
-          valid = true;
+      var valid = true;
+      var count = 0;
 
-      for (var key in fields) {
-        fields[key].validate('', function (errors) {
+      // 如果需要验证的fields为空，调用验证时立刻返回callback
+      if (this.state.fields.length === 0 && callback) {
+        callback(true);
+      }
+
+      this.state.fields.forEach(function (field, index) {
+        field.validate('', function (errors) {
           if (errors) {
             valid = false;
           }
-
-          if (++count === fieldLength) {
+          if (typeof callback === 'function' && ++count === _this2.state.fields.length) {
             callback(valid);
           }
         });
-      }
+      });
     }
   }, {
     key: 'validateField',
     value: function validateField(prop, cb) {
-      var fields = this.state.fields;
-
-      var field = fields[prop];
+      var field = this.state.fields.filter(function (field) {
+        return field.props.prop === prop;
+      })[0];
 
       if (!field) {
         throw new Error('must call validateField with valid prop string!');

dist/npm/src/form/FormItem.js

@@ -70,12 +70,6 @@ var FormItem = function (_Component) {
               return false;
             }
           });
-
-          var parent = _reactDom2.default.findDOMNode(this.parent());
-          if (parent) {
-            parent.addEventListener('blur', this.onFieldBlur.bind(this));
-            parent.addEventListener('change', this.onFieldChange.bind(this));
-          }
         }
       }
     }
@@ -246,7 +240,7 @@ var FormItem = function (_Component) {
             'is-error': error !== '',
             'is-validating': validating,
             'is-required': isRequired || required
-          }) },
+          }), onBlur: this.onFieldBlur.bind(this), onChange: this.onFieldChange.bind(this) },
         label && _react2.default.createElement(
           'label',
           { className: 'el-form-item__label', style: this.labelStyle() },

site/docs/zh-CN/checkbox.md

@@ -86,8 +86,6 @@ handleCheckAllChange(checked) {
 }
 
 handleCheckedCitiesChange(value) {
-  console.log(value);
-  
   const checkedCount = value.length;
   const citiesLength = this.state.cities.length;
   this.setState({

src/form/Form.jsx

@@ -4,8 +4,7 @@ import React from 'react';
 import { Component, PropTypes } from '../../libs';
 
 type State = {
-  fields: Object,
-  fieldLength: number
+  fields: Array<Component>,
 };
 
 export default class Form extends Component {
@@ -15,8 +14,7 @@ export default class Form extends Component {
     super(props);
 
     this.state = {
-      fields: {},
-      fieldLength: 0
+      fields: []
     }
   }
 
@@ -27,47 +25,46 @@ export default class Form extends Component {
   }
 
   addField(field: Component): void {
-    this.state.fields[field.props.prop] = field;
-    this.state.fieldLength++;
+    this.state.fields.push(field);
   }
 
   removeField(field: Component): void {
-    delete this.state.fields[field.props.prop];
-    this.state.fieldLength--;
+    if (field.props.prop) {
+      this.state.fields.splice(this.state.fields.indexOf(field), 1);
+    }
   }
 
   resetFields(): void {
-    const { fields } = this.state;
-
-    for (const key in fields) {
-      fields[key].resetField();
-    }
+    this.state.fields.forEach(field => {
+      field.resetField();
+    });
   }
 
   validate(callback: Function): void {
-    const { fields, fieldLength } = this.state;
-    let count = 0, valid = true;
+    let valid = true;
+    let count = 0;
+
+    // 如果需要验证的fields为空，调用验证时立刻返回callback
+    if (this.state.fields.length === 0 && callback) {
+      callback(true);
+    }
 
-    for (const key in fields) {
-      fields[key].validate('', errors => {
+    this.state.fields.forEach((field, index) => {
+      field.validate('', errors => {
         if (errors) {
           valid = false;
         }
-
-        if (++count === fieldLength) {
+        if (typeof callback === 'function' && ++count === this.state.fields.length) {
           callback(valid);
         }
       });
-    }
+    });
   }
 
   validateField(prop: string, cb: Function): void {
-    const { fields } = this.state;
-    const field = fields[prop];
+    const field = this.state.fields.filter(field => field.props.prop === prop)[0];
 
-    if (!field) {
-      throw new Error('must call validateField with valid prop string!');
-    }
+    if (!field) { throw new Error('must call validateField with valid prop string!'); }
 
     field.validate('', cb);
   }

src/form/FormItem.jsx

@@ -44,12 +44,6 @@ export default class FormItem extends Component {
             return false;
           }
         });
-
-        const parent= ReactDOM.findDOMNode(this.parent());
-        if (parent) {
-          parent.addEventListener('blur', this.onFieldBlur.bind(this))
-          parent.addEventListener('change', this.onFieldChange.bind(this))
-        }
       }
     }
   }
@@ -191,7 +185,7 @@ export default class FormItem extends Component {
         'is-error': error !== '',
         'is-validating': validating,
         'is-required': isRequired || required
-      })}>
+      })} onBlur={this.onFieldBlur.bind(this)} onChange={this.onFieldChange.bind(this)}>
         {
           label && (
             <label className="el-form-item__label" style={this.labelStyle()}>