react中装饰器的使用

最新推荐文章于 2024-08-06 13:42:42 发布

凉生可可

最新推荐文章于 2024-08-06 13:42:42 发布

阅读量981

点赞数 1

分类专栏：前端文章标签：装饰器 react

本文链接：https://blog.csdn.net/weixin_43466871/article/details/85048542

版权

本文介绍如何在React应用中使用装饰器来简化代码，将表单验证操作集中处理。通过定义装饰器函数，可以有效地统一处理多个表单验证场景。

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

利用装饰器简化代码，将表单验证操作统一到一个装饰器中进行

首先装饰器的定义为修饰器（Decorator）是一个函数，用来修改类的行为。
建立一个装饰器

export default (Comp) => {
   
   class Cp extends Comp{
   
	 constructor(props){
   
            super(props);
            this.state = {
   
                ...this.state,
                errors: {
   

                },     
                 // error queuq
            this.errorQueue = {
   };
			}
            this.setEmailcode = this.setEmailcode.bind(this);
             this.callError = this.callError.bind(this);
            this.fIn = this.fIn.bind(this);
            this.bOut = this.bOut.bind(this);
                
    }
     setEmailcode(v){
   
            this._clearStateKey('emailcode', v);
            if(v.target.value.length < 7){
   
                this._changeHandler('emailcode', v);
            }
        }
        ckemailcode(){
   
		let rt = true;
          	 const errors = [];
         	 const KEY = 'gcode';
            	const intl = this.intl

            this._isEmpty(this.state[KEY], errors, intl.formatMessage({
   id: "请输入谷歌验证码"}));
            //验证是否符合规则，不符合则扔到errors队列中去
            this._setError(KEY, error