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

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

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

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

需求：要求所有的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，将数据同步给 Form
    onChange(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);