react 封装表格组件_React 封装Form表单组件

使用前提：

主要是仿照 antd 组件中的form表单组件，通过组件包装之后组件提供一些方法导出一些方法，以及导出相应的值。Antd-Form

类似于这样的组件，⽤Form.create()的⽅式实现：

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

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

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

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

对于以上介绍，我们言归正传，对组件封装：

import React from 'react';

import { Input } from 'antd';

// 使用该方法的组件

@FormCreate

class FormComp extends React.Component {

render() {

const { getFieldDecorator } = this.props;

return (

{getFieldDecorator('name',{

rules: [{required: true, message: "请输入姓名"}]

})(

)}

{getFieldDecorator('password', {

rules: [{required: true, message: "请输入密码"}]

})(

)}

提交

)

}

}

export default FormComp ;

封装的高阶方法：

import React from 'react';

const FormCreate = (comp) => {

return class extends React.Component{

constructor(props){

super(props);

this.state={}

this.options = {};

}

handleChange = (e) => {

const { name, value } = e.target;

this.setState({[name]: value});

}

getFieldDecorator = (filed, option) => {

this.options[filed] = option;

return (Comp) => {

React.cloneElement(Comp, {

name: filed,

value: this.state.filed||'',

onChange: this.handleChange

})

}

}

getFieldsValue = () => {

return {...this.state};

}

getFieldValue = (filed) => {

return this.state[filed];

}

validateFields = callback => {

let errors = {};

const state = {...this.state};

for(let filed in this.options){

if(state[filed] === undefined){

errors[filed] = "error"

}

}

if (JSON.stringify(errors) == '{}') {

callback(undefined, state);

} else {

callback(errors, state);

}

}

render() {

return (

{...this.props}

getFieldDecorator={this.getFieldDecorator}

getFieldsValue={this.getFieldsValue}

getFieldValue={this.getFieldsValue}

validateFields={this.validateFields}

/>

)

}

}

}

总结

对于该高阶方法，使用起来还是比较容易，这种方法在项目当中很多会遇到，我们项目中的短信验证码就多处用到，于是就自己封装了一个高阶组件，还是比较好用。

希望对您有帮助，感谢您的点赞，谢谢您的支持。