React与Vue实现Input去除首尾空格的对比

需求：要求所有的input框提交前自动去除首尾空格，全部都是空格就全部去除。 最简单的办法是在提交前对数据作处理，但是这样会带来很多的重复性工作，所以需要把这层逻辑抽取出 来。

一、React的做法

目前用的是
React
开发，而
React
并没有原生提供类似功能，使用的
Antd
也没有提供，需要我们 自己封装。 如果都是
Input
组件，我们直接封装一层，加上去除首尾空格的逻辑即可。 去除的最佳时机应该是输入框失去光标的时候，所以应该监听
blur
事件。
具体代码如下：

import React from 'react';
import
{
Input
}
from 'antd';
export default class InputTrim extends React.Component
{handleBlur =
(e)
=>
{//
去除头尾空格e.target.value = e.target.value.trim();const
{
onChange
}
= this.props;//
主动调
onChange，将数据同步给
FormonChange(e);}render
()
{return
(<Input onBlur={this.handleBlur}
{...this.props}
/>)}
}

有时候并不一定都是
Input，也有可能是
Textarea,
这就要求我们把代码写得灵活一点，我们可以采 用
React
特有的高阶组件扩展我们的逻辑。

具体代码如下：

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

二、Vue的做法

在用
Vue
开发的时候，官方提供了一个很方便方法，使用的
trim
装饰符。 具体代码如下：

 <input v-model.trim="bindValue" />

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！