React-input-mask 无法粘贴正确的电话答案

【问题标题】：React-input-mask inability to paste correct phoneReact-input-mask 无法粘贴正确的电话
【发布时间】：2021-06-01 21:19:33
【问题描述】：

我的输入有以下代码

<InputMask
                        id='phone'
                        name='phone'
                        type='tel'
                        value={this.state.phone}
                        mask='+63(\999) 999-99-99'
                        maskChar='X'
                        onChange={(e: SyntheticEvent<HTMLInputElement>): void => {
                            this.setState({
                                phone: e.currentTarget.value.replace(/[^\d.+]/g, ''),
                            });
                        }}
                        onBlur={this.validateInput}
                        onPaste={(e) => this.handlePaste(e)}
                        className='form-control'
                        placeholder='Your Phone'
                    />

这里+639位不能删除。但是当我尝试粘贴电话号码时，我得到的电话不正确。例如我粘贴+639055943784 并得到+63(963) 963-90-55，这是不想要的结果。我的粘贴处理程序是

    handlePaste = (e) => {
    this.setState({phone: e.clipboardData.getData("Text")})
}

【问题讨论】：

标签： javascript reactjs input

【解决方案1】：

试试那个

handlePaste = (e) => {
  const number = e.clipboardData.getData("Text");
  const formattedNumber = number.replace(/639+/i, '')
  this.setState({phone: formattedNumber})
}

当粘贴的值将包含另一个 639 时，也可能存在边缘情况，但我认为您可以独立获取它

【讨论】：

【解决方案2】：

我创建了一个package，它公开了一个输入组件，该组件根据它接收到的掩码显示一个掩码值。

将光标保持在正确位置时，掩码会发生变化（即使您在输入的中间更改了部分值，粘贴了一些字符，或者删除了其中的一部分，即使掩码发生了变化）。

我为您的用例创建了一个现场演示，使用掩码 +63(9XX) XXX-XX-XX 并定义了使用 X 作为用户提供的字符的自定义掩码规则（而不是 9，因为您想要一个数字 9 静态在掩码中）并将其与只接受数字/数字的正则表达式相关联：

https://codesandbox.io/s/react-phone-mask-70fwc?file=/src/index.js:123-141

import React from "react";
import { MaskedInput } from "react-hook-mask";

const mask = "+63(9XX) XXX-XX-XX";
const maskGenerator = {
  rules: new Map([["X", /\d/]]),
  generateMask: () => mask
};

const PhoneMaskedInput = () => {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <p>Phone Number:</p>
      <MaskedInput
        maskGenerator={maskGenerator}
        value={value}
        onChange={setValue}
      />
      <p>Value: {value ? "+639" + value : undefined}</p>
    </div>
  );
};

您可以在以下位置查看包含多个示例的演示：

https://lucasbasquerotto.github.io/react-masked-input

安装包：npm i react-hook-mask

这个组件包装了一个默认的input，但是这个包也暴露了hooks，让你可以将它与任何类型的组件一起使用，以及使用dynamic masks和动态规则的选项（如上例）。

您可以在以下位置查看有关该软件包的更多信息：

https://www.npmjs.com/package/react-hook-mask

【讨论】：