next.js 如何在React中屏蔽任何元素,而不仅仅是输入

0aydgbwb  于 2022-11-23  发布在  React
关注(0)|答案(1)|浏览(115)

我正在用NextJS和MaterialUI(mui)制作一个管理 Jmeter 板,我需要屏蔽一些值(例如:电话号码)。
我对输入元素使用react-input-mask,但是我不知道如何屏蔽任何元素(例如,表格单元格中的span)。
例如,我的后端提供了一个电话号码5511912345678和一个文档编号12345678900,我需要以如下方式在表中显示它们:
| 名字|姓氏|电话号码|文件|
| - -|- -|- -|- -|
| 若翰|多伊|(11)第1234 -5678页| 123.456.789-00 |
| 洛雷姆|益普苏姆|电话:+55(11)1234-5678| 234.567.891-00 |
如果没有<input>元素,我如何屏蔽表格单元格上的值?我假设使用react-input-mask是不可能的,所以添加另一个包是没有问题的。我只是不知道安装什么包来实现这个结果。
谢谢你!

46scxncf

46scxncf1#

你可以使用NPM中的一个函数库,也可以构建自己的掩码函数。这里是掩码函数的一个简单实现。Here is a working example和以下是它的重要片段。
digitsExtractor将返回一个 Package 对象,该对象有助于从数字中提取数字。

function digitsExtractor(numberString) {
  const digitsInReverse = numberString.split('').reverse();
  const extractDigits = (count = 0) => {
    const digits = [];
    while (count-- > 0) digits.push(digitsInReverse.pop());
    return digits.join('');
  };
  return {
    extractDigits,
    getRemainingDigitsCount: () => digitsInReverse.length,
  };
}

maskPhoneNumber将屏蔽电话号码

function maskPhoneNumber(phoneNumber) {
  const { extractDigits, getRemainingDigitsCount } =
    digitsExtractor(phoneNumber);

  return `+${extractDigits(2)} (${extractDigits(2)}) ${
    getRemainingDigitsCount() === 8
      ? [extractDigits(4), extractDigits(4)].join('-')
      : getRemainingDigitsCount() === 9
      ? `${extractDigits(1)}.${extractDigits(4)}-${extractDigits(4)}`
      : ''
  }`;
}

maskDocumentNumber将屏蔽文档编号

function maskDocumentNumber(documentNumber) {
  const { extractDigits } = digitsExtractor(documentNumber);

  return [
    [extractDigits(3), extractDigits(3), extractDigits(3)].join('.'),
    extractDigits(2),
  ].join('-');
}

您可以根据自己的要求使其更通用。

相关问题