add default value

Author: MinJieLiu

example/App.jsx

@@ -10,13 +10,7 @@ export default class extends Component {
 
   state = {
     formValues: {
-      email: '',
-      phone: '',
-      birthday: '',
-      sex: '',
-      city: '',
-      hobby: ['2'],
-      remarks: '',
+      sex: '1', // default
     },
     isAllValid: undefined,
   };

example/BasicForm.jsx

@@ -140,15 +140,15 @@ class BasicForm extends Component {
               <Radio
                 id="male"
                 name="sex"
-                value="0"
+                value="1"
               />
               male
             </label>
             <label htmlFor="female">
               <Radio
                 id="female"
                 name="sex"
-                value="1"
+                value="2"
               />
               female
             </label>

example/ChildForm.jsx

@@ -19,7 +19,6 @@ class ChildForm extends Component {
     super(props);
     // Initializes the values
     props.formControl.init({
-      money: '',
       url: '',
     });
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-validate-framework",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "React validation framework.",
   "main": "lib/index.js",
   "scripts": {

src/Field.jsx

@@ -6,26 +6,45 @@ const propTypes = {
 
 const contextTypes = {
   fields: PropTypes.object.isRequired,
+  initField: PropTypes.func.isRequired,
   onFormChange: PropTypes.func.isRequired,
 };
 
 /**
  * Field component
  * @param FormComponent
+ * @param fieldType
  * @param name
  * @param props
  * @param fields
+ * @param initField
  * @param onFormChange
  * @constructor
  */
-const Field = (FormComponent, { name, ...props }, { fields, onFormChange }) => (
-  <FormComponent
-    name={name}
-    field={fields[name]}
-    onChange={onFormChange}
-    {...props}
-  />
-);
+const Field = (FormComponent, fieldType, {
+  name,
+  ...props
+}, {
+  fields,
+  initField,
+  onFormChange,
+}) => {
+  // Initialize field.
+  if (!fields[name]) {
+    // Checkbox uses an array
+    initField({
+      [name]: fieldType === 'checkbox' ? [] : '',
+    });
+  }
+  return (
+    <FormComponent
+      name={name}
+      field={fields[name]}
+      onChange={onFormChange}
+      {...props}
+    />
+  );
+};
 
 Field.propTypes = propTypes;
 Field.contextTypes = contextTypes;

src/FormControl.jsx

@@ -25,6 +25,7 @@ export default (schemas, methods) => FormComponent => (
 
     static childContextTypes = {
       fields: PropTypes.object.isRequired,
+      initField: PropTypes.func.isRequired,
       onFormChange: PropTypes.func.isRequired,
     };
 
@@ -66,6 +67,7 @@ export default (schemas, methods) => FormComponent => (
     getChildContext() {
       return {
         fields: this.state.fields,
+        initField: this.init,
         onFormChange: this.onFormChange,
       };
     }

src/Inputs/Checkbox.jsx

@@ -8,4 +8,4 @@ export default Object.assign(Field.bind(null, ({ field, value, ...props }) => (
     {...props}
     type="checkbox"
   />
-)), Field);
+), 'checkbox'), Field);

src/Inputs/Radio.jsx

@@ -8,4 +8,4 @@ export default Object.assign(Field.bind(null, ({ field, value, ...props }) => (
     {...props}
     type="radio"
   />
-)), Field);
+), 'radio'), Field);

src/Inputs/Select.jsx

@@ -7,4 +7,4 @@ export default Object.assign(Field.bind(null, ({ field, ...props }) => (
     value={field.value}
     {...props}
   />
-)), Field);
+), 'select'), Field);

src/Inputs/Text.jsx

@@ -8,4 +8,4 @@ export default Object.assign(Field.bind(null, ({ field, ...props }) => (
     value={field.value}
     {...props}
   />
-)), Field);
+), 'text'), Field);