实现 Input 去除首尾空格

[chenwangji]

做项目遇到一个需求，要求所有的 input 框提交前自动去除首尾空格，全部都是空格就全部去除。

最简单的办法是在提交前对数据作处理，但是这样会带来很多的重复性工作，所以需要把这层逻辑抽取出来。

Vue 的做法

在之前用 Vue 开发的时候，官方提供了一个很方便方法，使用的 trim 装饰符：

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

React 上使用

然而目前用的是 React 开发，而 React 并没有原生提供类似功能，使用的 Antd 也没有提供，需要我们自己封装。

一般组件

如果都是 Input 组件，我们直接封装一层，加上去除首尾空格的逻辑即可。

去除的最佳时机应该是输入框失去光标的时候，所以应该监听 blur 事件。

具体代码如下：

// TrimInput Component

import React from 'react';
import { Input } from 'antd';

export default class TrimInput 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 特有的高阶组件扩展我们的逻辑。

具体代码：

// withTrim

import React, { Component } from 'react';

const withTrim = (WrappedComponent) =>
  class WrapperComponent extends Component {
    // 去除头尾空格
    handleBlur = (e) => {
      e.target.value = e.target.value.trim();
      const { onChange } = this.props;
      onChange(e);
    }

    render() {
      return <WrappedComponent onBlur={this.handleBlur} {...this.props} />;
    }
}

export default withTrim;

使用：

const TextArea = withTrim(AntdInput.TextArea);