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

阳光穿透心脏的1/2处 2022-12-11 15:13 224阅读 0赞

举例：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>
        );
       }
     };
    }

原文：视频课堂笔记