vue，react的项目，有没有办法统一去掉所有输入内容的前后空格（输入框，文本框之类的）?

Question

由于项目技术栈有vue，react，我有如下想法：
1.给对应组件封一层，但这样改动量比较大，而且需要所有项目都接入封装的组件
2.统一给axios或干脆给fetch做拦截，处理所有入参的前后空格，但一时也没想到有什么影响，且也需要各系统接入/改造
请问各位大佬有无更合适，侵入性更小的方式

补充：
我想了下还可以委托change事件到body上，然后通过event改变input的value

Answer 1

vue 的话，可以使用 .trim 修饰符。

统一处理的方案听上去都会存在未知风险，且无法规避。所以建议还是由使用方主动选择。

当然，如果你有固定组件，那么你可以考虑覆盖它。这样行为更加可控。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

可以考虑使用HOC（Higher Order Component）或者装饰器模式给组件进行封装，这样可以避免修改原组件代码。在封装的组件中，可以对输入框的change事件进行拦截，去掉前后空格后再传递给原组件，例如：

import React from 'react';

function trimInputWrapper(WrappedComponent) {
  return class TrimInputWrapper extends React.Component {
    handleInputChange = (event) => {
      const { value } = event.target;
      const trimValue = value.trim();
      event.target.value = trimValue; // 修改输入框的值
      this.props.onChange(event); // 传递给原组件的onChange事件
    }

    render() {
      return <WrappedComponent {...this.props} onChange={this.handleInputChange} />;
    }
  };
}

export default trimInputWrapper;

使用时只需要将需要去掉前后空格的输入框组件进行封装，例如：

import React from 'react';
import trimInputWrapper from './trimInputWrapper';

class MyInput extends React.Component {
  render() {
    return <input type="text" {...this.props} />;
  }
}

export default trimInputWrapper(MyInput);

对于Vue项目，也可以使用类似的方法进行封装。

关于在axios或fetch中拦截处理前后空格，可以使用axios的拦截器或者fetch的中间件来实现，例如：

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 处理所有请求参数的前后空格
  const params = config.params || {};
  for (const key in params) {
    if (typeof params[key] === 'string') {
      params[key] = params[key].trim();
    }
  }

  // 处理所有请求体的前后空格
  const data = config.data || {};
  for (const key in data) {
    if (typeof data[key] === 'string') {
      data[key] = data[key].trim();
    }
  }

  return config;
}, error => {
  return Promise.reject(error);
});

对于fetch的中间件，可以使用类似的方法实现。这样可以避免在每个请求中都手动去掉前后空格。

Answer 3

项目中采用了方案2在axios处理了入参前后空格，影响要自己考虑自己项目需求，我们项目不存在需要头尾输入空格的情况，因此没有什么影响，只是需要明确告知相关人员加入了这部分处理