react-input-mask组件值末尾出现下划线问题求助

问题背景 #

在Next.js项目中搭配Ant Design使用，封装react-input-mask作为输入掩码组件时，发现无论设置何种掩码，即便内容完全填写，返回的值末尾都会附带一个下划线。

原因 #

react-input-mask默认使用下划线_作为掩码占位符，且会将未被输入内容填充的占位符保留在最终返回值中，即使输入填满掩码长度，组件仍会把末尾的占位符包含进去。

解决方案 #

方案1：自定义占位符为空字符串 #

修改封装的InputMask组件，给MaskedInput添加maskChar=""属性，让占位符不再被包含到返回值里：

const InputMask = ({ mask, ...props }) => {
  return (
    <MaskedInput mask={mask} maskChar="" {...props}>
      {(inputProps) => <Input {...inputProps} />}
    </MaskedInput>
  );
};

方案2：提交时手动过滤下划线 #

如果不想修改组件逻辑，可在表单提交阶段对返回值做处理，移除末尾的下划线：

<Form onFinish={({ phone }) => setValue(phone.replace(/_$/, ''))}>

完整示例代码（方案1） #

import { Form, Space, Input, Button } from "antd";
import { useState } from "react";
import MaskedInput from "react-input-mask";
import "./styles.css";

const InputMask = ({ mask, ...props }) => {
  return (
    <MaskedInput mask={mask} maskChar="" {...props}>
      {(inputProps) => <Input {...inputProps} />}
    </MaskedInput>
  );
};

export default function App() {
  const [value, setValue] = useState(null);
  return (
    <div className="App">
      <Form onFinish={({ phone }) => setValue(phone)}>
        <Space direction="vertical">
          <Form.Item name="phone" style={{ margin: 0 }}>
            <InputMask mask="(99) 99999-9999" />
          </Form.Item>
          {value && <div>Value: {value}</div>}
          <Button type="primary" htmlType="submit">
            Enviar
          </Button>
        </Space>
      </Form>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Henrique Zolini