react封装form受控组件

最新推荐文章于 2024-08-03 09:28:46 发布

灿尔哈擦苏

最新推荐文章于 2024-08-03 09:28:46 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： react react受控组件 react高阶组件

本文链接：https://blog.csdn.net/susuzhe123/article/details/97116924

版权

本文介绍如何在React中通过高阶组件方式封装受控表单组件FormCreate，实现对多个表单和输入框的统一管理和便捷处理。

摘要由CSDN通过智能技术生成

页面中多个表单，多个输入框，统一封装处理，formCreate为一个高阶组件

import React from 'react';

export const formCreate = WrappedComponent => class extends React.Component {
    
    constructor(){
		super();
		this.state={fields:{}}
	}
 
	onChange = key => e =>{
		const { fields } = this.state;
		fields[key] = e.target.value;
		this.setState({
			fields,
		});
	}
 
	handleSubmit=()=>this.state.fields
 
	getField = fieldName =>{
		return {
			onChange:this.onChange(fieldName)
		}
	}
 
	render(){
		const props = {
			...this.props,
			getVal:this.handleSubmit,
			setval:this.getField,
		}
 
		return(<WrappedComponent {...props}/>)
	}

};

使用：

import { formCreate } from '../../components/formCreat';

@formCreate
export default class Login extends React.Component {
...//省略代码
<input type="text" {...this.props.setval('username'