摘要：嗯，可能也是最后一版。。。用例用法接受一個參數。和上面的作用一樣，相同的會覆蓋中的值寫在的事件中。或者，會在提交的時候調用，形參為中的數據，和一樣。參考上面的例子獲取所有的數據獲取所有改變過的數據

嗯，可能也是最后一版。。。哈哈~~~只是寫著玩

簡化版的redux-form，只是覺得不需要redux-form那么復雜的功能，也不想要和redux關聯，而且希望有一個簡單管理form的東西，所以就寫了一個。肯定有很多不足，比如checkbox/radio group怎么管理。。。沒有解決。。。

import React from "react";

export default function reactForm(options){
  const { fields=[], initialValues={}, validate, validateOnBlur, withRef } = options;

  return (Component)=>{
    class Form extends React.Component {
      constructor(props) {
        super(props);

        this.initialValues = { ...initialValues, ...props.initialValues };
        this.state = this.getInitialFields();

        this.touchedKeys = {};
      }
      
      componentWillReceiveProps(nextProps){
          if(this.props.initialValues != nextProps.initialValues) {
              this.initialValues = { ...initialValues, ...nextProps.initialValues };
              this.resetForm();
          }
      }

      getInitialFields = ()=>{
        return fields.reduce((prev, key)=>{
          prev[key] = typeof this.initialValues[key] == "undefined" ? undefined : this.initialValues[key];
          return prev;
        }, {})
      }

      resetForm = ()=>{
        this.setState(this.getInitialFields());
      }

      setInstance = (instance)=>{
        this.instance = instance;
      }

      getInstance = ()=>{
        if(withRef) return this.instance;
        console.error("Can not get instance when withRef is false");
      }

      getValues = ()=>{
        return fields.reduce((prev, key)=>{
          prev[key] = this.state[key];
          return prev;
        }, {});
      }

      getTouchedValues = ()=>{
        let result = {};
        for(let key in this.touchedKeys) {
          if(this.touchedKeys.hasOwnProperty(key)){
            result[key] = this.state[key];
          }
        }
        return result;
      }

      onFieldChange = (e, key)=>{
        let value = ["radio", "checkbox"].includes(e.target.type) ? e.target.checked : e.target.value;

        console.log(`trigger field change with ${key} ${value}`);

        this.setState({
          [key]: value
        }, ()=>{
          this.touchedKeys[key] = true;
        });
        validate && validate(key, value);
      }

      onFieldBlur = (e, key)=>{
        let value = ["radio", "checkbox"].includes(e.target.type) ? e.target.checked : e.target.value;

        validateOnBlur(key, value);
      }

      handleSubmit = (fn)=>{
        if(typeof fn == "function") {
          return (e)=>{
            e.preventDefault();
            e.stopPropagation();
            fn(this.getValues());
          }
        } else {
          fn.preventDefault();
          fn.stopPropagation();
        }
      }

      buildFields = ()=>{
        return fields.reduce((prev, key)=>{
          let value = this.state[key];
          let field = { onChange: (e)=>{ this.onFieldChange(e, key) } };
          
          if(typeof value === "boolean") field.checked = value;
          else field.value = value;

          if(validateOnBlur) field.onBlur = (e)=>{ this.onFieldBlur(e, key) };

          prev[key] = field;
          return prev;
        }, {})
      }

      buildProps = (props)=>{
        let _props = { ...props };

        _props.fields = this.buildFields();
        _props.handleSubmit = this.handleSubmit;
        _props.getValues = this.getValues;
        _props.getTouchedValues = this.getTouchedValues;
        _props.resetForm = this.resetForm;

        if(withRef) {
          _props.ref = this.setInstance;
        }

        return _props;
      }

      render(){
        let props = this.buildProps(this.props);

        return ;
      }
    }

    return Form;
  }
} 

用例：

import React from "react";
import Form from "./form";

export default class FormApp extends React.Component {
  constructor(props) {
    super(props);
  }

  onClick = ()=>{
    console.log(this.instance.getTouchedValues());
  }

  render(){
    return (
      

        
{ this.instance=instance; }} initialValues={{ name: true }}/>
        Values
      
    )
  }
}

import React from "react";
import reactForm from "components/react-form";

function validate(key, value){
  console.log(`validateOnBlur ${key} ${value}`);
}

@reactForm({ fields: ["name", "bbb"], withRef: true, initialValues: { bbb: "bbbbbb" }, validateOnBlur: validate })
export default class Form extends React.Component {
  constructor(props) {
    super(props);
  }

  onSubmit = (values)=>{
    console.log(values);

    let { getTouchedValues } = this.props;
    console.log(getTouchedValues());

    this.props.resetForm();
  }

  render(){
    let { fields: { name, bbb }, handleSubmit } = this.props;

    return (
      
        
          name:
          
        
        
          bbb
          
        
        submit
      
    )
  }
}

用法：

@reactForm(options)

options: {
  fields: ["field1", "field2", "field3", "checkbox"...], // names of fields
  initialValues: { "field1":"value1", "field2":"value2", "checkbox":true }, // the initial values of fields
  validate: fn, // the function will be called when onChange
  validateOnBlur: fn, // the function will be called when onBlur
  withRef: false // when this is true, you can get the inner component by using getInstance
}

Component 接受一個initialValues參數。和上面的initialValues作用一樣，相同的key會覆蓋option.initialValues中的值

API

handleSubmit, 寫在form的onSubmit事件中。

onSubmit={handleSumit}或者onSubmit={handleSubmit(fn)}，fn會在form提交的時候調用，形參為form中的數據

fields，和redux-form一樣。參考上面的例子

getValues 獲取所有的數據

getTouchedValues 獲取所有改變過(onChange)的數據