如何使用ReactJS中的MaskedInput为CPF或CNPJ设置掩码？

问题描述

我是ReactJS的初学者，我正在尝试为表单的输入字段设置掩码。

我要配置的此掩码必须是动态的，因为如果该字段是CPF或CPNJ，它应该起作用：

CPF格式： 111.111.111-11

CNPJ格式： 11.111.111/1111-11

正则表达式可同时验证两者： /(^\d{3}\.\d{3}\.\d{3}\-\d{2}$)|(^\d{2}\.\d{3}\.\d{3}\/\d{4}\-\d{2}$)/

我正在使用react-text-mask来尝试配置掩码。我正在插入CPF和CNPJ正则表达式，但是react-text-mask无法识别它。当用户自动键入超过11个字符时，该掩码为CNPJ格式。你能告诉我我该怎么做吗？

这是我放入codesandbox的代码

谢谢。

解决方法

您可以使用 TextField 组件的 onChange 属性简单地格式化输入事件中的数据，然后删除 InputProps 属性和 TextMaskCustom强> 组件。

const handleCpfCnpjChange = (event) => {
  // Get only the numbers from the data input
  let data = event.target.value.replace(/\D/g,"");
  // Checking data length to define if it is cpf or cnpj
  if (data.length > 11) {
    // It's cnpj
    let cnpj = `${data.substr(0,2)}.${data.substr(2,3)}.${data.substr(5,3)}/`;
    if (data.length > 12)
      cnpj += `${data.substr(8,4)}-${data.substr(12,2)}`;
    else 
      cnpj += data.substr(8);
    // Pass formatting for the data
    data = cnpj;
  } else {
    // It's cpf
    let cpf = "";
    let parts = Math.ceil(data.length / 3);
    for (let i = 0; i < parts; i++) {
      if (i === 3) {
        cpf += `-${data.substr(i * 3)}`;
        break;
      }
      cpf += `${i !== 0 ? "." : ""}${data.substr(i * 3,3)}`;
    }
    // Pass formatting for the data
    data = cpf;
  }
  // Update state
  setcpfCnpjValue(data);
};

此处的完整代码：codesandbox

javascript reactjs reactjs