如何使用 ReactJS 的 MaskedInput 為 CPF 或 CNPJ 設置掩碼？

Question

我是 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 格式。 你能告訴我怎么做嗎？

這是我放入codeandbox的代碼

提前致謝。

Answer 1

您可以使用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);
};

完整代碼在這里： codeandbox