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

前端砖家^_^

于 2021-12-06 14:40:39 发布

阅读量2.9k

点赞数 2

分类专栏： Vue React 文章标签： react.js vue.js javascript

本文链接：https://blog.youkuaiyun.com/html5_mylove/article/details/121746523

版权

这篇博客对比了React和Vue中实现Input输入时自动去除首尾空格的方法。在React中，由于没有原生支持，作者通过封装组件并在blur事件中处理；而在Vue中，可以使用trim修饰符轻松实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

import React from 'react';
import {
    Input } from 'antd';
export default class InputTrim extends React.Component {
   
  handleBlur = (e) => {