去除前后空格withTrim的组件封装

lixh_man

于 2023-08-18 16:35:24 发布

阅读量264

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/lixinhua_man/article/details/132364726

版权

在有些场景下，需要对一些input 、textarea一些输入框组件进行去除前后空格的校验，

通常情况下是直接在失焦的时候直接处理好，或者在一些保存数据的时候统一处理

vue的写法 v-model.trim

<Input v-model.trim="value14" placeholder="Enter something..." clearable style="width: 200px"></Input>

react hooks写法

ts

import React, { ChangeEvent, ChangeEventHandler, ComponentType, FocusEventHandler } from 'react';

export default function withTrim<
	Props extends {
		onChange?: ChangeEventHandler;
		onBlur?: FocusEventHandler;
	}
>(WrappedComponent: ComponentType<Props>) {
	return React.forwardRef<any, Props>(function (props: Props, ref) {
		// 去除头尾空格
		const handleBlur: FocusEventHandler<any> = (e) => {
			e.target.value = e.target.value.trim();
			props.onBlur && props.onBlur(e);
			props.onChange && props.onChange(e as ChangeEvent<any>);
		};

		return <WrappedComponent ref={ref} {...props} onBlur={handleBlur} />;
	});
}

js

import React from 'react';

/**
 * @param WrappedComponent 组件
 * @returns 对于一些文本框进行前后空格剔除
 */
export default function withTrim(WrappedComponent) {
	return React.forwardRef(function (props, ref) {
		// 去除头尾空格
		const handleBlur = (e) => {
			e.target.value = e.target.value.trim();
			props.onBlur && props.onBlur(e);
			props.onChange && props.onChange(e);
		};

		return <WrappedComponent ref={ref} {...props} onBlur={handleBlur} />;
	});
}

class

import React from 'react';
import { Input } from 'antd';
const withTrim = (WrappedComponent) =>
  class extends React.Component {
    // 去除头尾空格
    handleBlur = (e) => {
       e.target.value = e.target.value.trim();
      const { onChange } = this.props;
       onChange(e);
     }

     render() {
     return <WrappedComponent onBlur={this.handleBlur} {...this.props} />;
     }
 }
const InputTrim = withTrim(Input);