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

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

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

vue的写法 v-model.trim

react hooks写法

ts

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

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

		return ;
	});
}

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 ;
	});
}

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 ;
   

}
 }
const InputTrim = withTrim(Input);