react之表单组件的封装设计与实现

举例：antd组件

antd 表单使⽤

 

⽤ state 实现⽤户名密码登录

 

//FormPage.js

 

import React, {Component} from "react";
import {Form, Input, Button, Icon} from "antd";
export default class FormPage extends Component {
 constructor(props) {
   super(props);
   this.state = {
     name: "",
     password: ""
   };
 }
 submit = () => {
   console.log("submit", this.state);
 };
 render() {
   const {name, password} = this.state;
   return (
     <div>
       <h3>FormPage</h3>
       <Form>
         <Form.Item label="姓名">
           <Input
              placeholder="please input ur name"
              prefix={<Icon type="user" />}
              value={name}
              onChange={e => {
                this.setState({name: e.target.value});
              }}
           />
        </Form.Item>
        <Form.Item label="密码">
          <Input
              type="password"
              placeholder="please input ur password"
              prefix={<Icon type="lock" />}
              value={password}
              onChange={e => {
                this.setState({password: e.target.value});
              }}
         />
       </Form.Item>
       <Button type="primary" onClick= {this.submit}> 提交
       </Button>
    </Form>
   </div>
  );
 }
}

⽤ Form.create() 的⽅式实现：

 

    getFieldDecorator ： ⽤于和表单进⾏双向绑定

    getFieldsValue ：获取⼀组输⼊控件的值，如不传⼊参数，则获 取全部组件的值

    getFieldValue ： 获取⼀个输⼊控件的值

    validateFields ：校验并获取⼀组输⼊域的值与 Error ，若 fifieldNames 参数为空，则校验全部组件

 

import React, {Component} from "react";
import {Form, Input, Button, Icon} from "antd";
//校验规则
const nameRules = {required: true, message: "please input ur name"};
const passwordRules = {required: true, message: "please input ur password"};

@Form.create()
class FormPage2 extends Component {
 submit = () => {
   const {getFieldsValue, getFieldValue,validateFields} = this.props.form; 
   validateFields((err, values) => {
      if (err) {
         console.log("err", err); //sy-log
      } else {
         console.log("success", values); //sy-log
      }
   });
  // console.log("submit", getFieldsValue(),getFieldValue("name"));
};
render() {
 console.log("props", this.props.form);
 const {getFieldDecorator} = this.props.form;
 return (
   <div>
     <h3>FormPage2</h3>
     <Form>
       <Form.Item label="姓名">
         {getFieldDecorator("name", {rules: [nameRules]})(
           <Input
             placeholder="please input ur name"
             prefix={<Icon type="user" />}
          />
         )}
       </Form.Item>
       <Form.Item label="密码">
         {getFieldDecorator("password", {rules: [passwordRules]})(
           <Input
              type="password"
              placeholder="please input urpassword"
              prefix={<Icon type="lock" />}
           />
         )}
       </Form.Item>
       <Button type="primary" onClick= {this.submit}>
         提交
       </Button>
     </Form>
   </div>
  );
 }
}
export default FormPage2;

表单组件设计思路

 

      表单组件要求实现 数据收集、校验、提交 等特性，可通过⾼阶组 件扩展

      ⾼阶组件给表单组件传递⼀个 input 组件 包装函数 接管其输⼊事 件并统⼀管理表单数据

      ⾼阶组件给表单组件传递⼀个 校验函数 使其具备数据校验功能

 

原理实现：

 

表单基本结构，创建 MyFormPage.js

 

import React, {Component} from "react";
import kFormCreate from
"../conponents/kFormCreate";
//校验规则
const nameRules = {required: true, message:"please input ur name"};
const passwordRules = {required: true, message:"please input ur password"};

export default kFormCreate(
 class MyFormPage extends Component {
   submit = () => {
     const {getFieldsValue, getFieldValue,validateFields} = this.props;
     validateFields((err, values) => {
       if (err) {
          console.log("err", err); //sy-log
       } else {
          console.log("success", values); //sylog
       }
     });
     // console.log("submit", getFieldsValue(),
     getFieldValue("name")); //sy-log
   };
   render() {
     console.log("props", this.props); //sy-log
     const {getFieldDecorator} = this.props;
     return (
       <div>
         <h3>MyFormPage</h3> 
         {getFieldDecorator("name", {rules: [nameRules]})(
             <input type="text"
                    placeholder="please input ur name" />
         )}
         {getFieldDecorator("password", {rules: [passwordRules]})(
             <input type="password"
                    placeholder="please input ur password" />
         )}
         <button onClick={this.submit}>提交</button>
       </div>
     );
   }
 }
);

⾼阶组件 kFormCreate ：扩展现有表单，./components/kFormCreate.js

 

import React, {Component} from "react";
export default function kFormCreate(Cmp) {
 return class extends Component {
   constructor(props) {
     super(props);
     this.state = {};
     this.options = {};
   }
   handleChange = e => {
     let {name, value} = e.target;
     this.setState({[name]: value});
   };
   getFieldDecorator = (field, option) => {
     this.options[field] = option;
     return InputCmp =>
       React.cloneElement(InputCmp, {
         name: field,
         value: this.state[field] || "",
         onChange: this.handleChange //控件change
         事件处理
       });
   };
   getFieldsValue = () => {
      return {...this.state};
   };
   getFieldValue = field => {
     return this.state[field];
   };
   validateFields = callback => {
     let errors = {};
     const state = {...this.state};
     for (let field in this.options) {
       if (state[field] === undefined) {
         errors[field] = "error";
       }
       console.log("item", field); //sy-log
     }
     if (JSON.stringify(errors) === "{}") {
       // 没有错误信息
       callback(undefined, state);
     } else {
       // 有错误信息，返回
       callback(errors, state);
     }
   };
   render() {
     return (
       <div className="border">
         <Cmp
           {...this.props}
           getFieldDecorator= {this.getFieldDecorator}
           getFieldsValue={this.getFieldsValue}
           getFieldValue={this.getFieldValue}
           validateFields={this.validateFields}
         />
       </div>
    );
   }
 };
}

原文：视频课堂笔记