React JS中如何根据选中按钮切换多种input mask输入掩码

方案1：使用对象映射（更简洁，推荐） #

提前定义掩码和按钮标识的映射关系，直接通过选中的按钮key取值即可，比switch case代码更清爽易维护：

// 提前定义掩码映射表，key对应你按钮的选中值，value对应掩码
const maskMap = {
  "Key1": maskOne,
  "Key2": maskTwo,
  "Key3": maskThree,
  "Key4": maskFour,
  // 可按需添加默认兜底掩码
  "default": defaultMask
}

const [input, setInput] = useMask(
  maskMap[selectedButton] || maskMap.default
);

方案2：使用switch case（适合需要额外判断逻辑的场景） #

如果切换掩码的逻辑还有额外判断需求，你可以封装一个单独的函数来处理switch逻辑：

// 封装获取掩码的函数
const getCurrentMask = () => {
  switch(selectedButton) {
    case "Key1":
      return maskOne
    case "Key2":
      return maskTwo
    case "Key3":
      return maskThree
    case "Key4":
      return maskFour
    default:
      // 未选中按钮时返回的兜底掩码
      return defaultMask
  }
}

const [input, setInput] = useMask(getCurrentMask());

注意事项 #

• 你原来的双掩码切换逻辑运行正常，说明你用的useMask自定义Hook支持动态响应入参变更，以上两种方案都可以直接复用原逻辑
• 后续新增掩码只需要在映射表或者switch里加对应分支即可，不需要修改核心切换逻辑

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