React集成react-imask与MUI TextField实现GUID掩码失效求助

问题根源 #

你当前代码中mask属性传入的是带斜杠的字符串形式正则，而react-imask的mask属性如果使用正则校验，需要传入RegExp实例，而非字符串。另外，正则中的^和$在imask场景下无需添加，组件会自动处理输入值的匹配逻辑。

修正方案1：使用正则对象作为掩码 #

修改TextMaskCustom组件中的IMaskInput配置，将字符串正则替换为RegExp实例：

import './style.css';

import React, { forwardRef, FunctionComponent } from 'react';
import {
  InputBaseComponentProps,
  TextField,
  TextFieldProps,
} from '@mui/material';
import { IMaskInput } from 'react-imask';

interface ICustomOnChangeProp {
  onChange: (event: { target: { value: string } }) => void;
}

const TextMaskCustom = forwardRef<
  HTMLInputElement,
  Omit<InputBaseComponentProps, 'onChange'> & ICustomOnChangeProp
>(function TextMaskCustom(props, ref) {
  const { onChange, ...other } = props;
  return (
    <IMaskInput
      {...other}
      // 替换为RegExp实例，设置大小写不敏感（可选）
      mask={/[A-Za-z0-9]{8}-[A-Za-z0-9]{4}-[A-Za-z0-9]{4}-[A-Za-z0-9]{4}-[A-Za-z0-9]{12}/i}
      inputRef={ref}
      onAccept={(value) => onChange({ target: { value } })}
      placeholderChar="_"
      type="text"
      // 启用覆盖模式，优化输入体验
      overwrite={true}
    />
  );
});

const GuidInput: FunctionComponent<TextFieldProps> = (props: TextFieldProps) => {
  return (
    <TextField
      {...props}
      InputProps={{
        inputComponent: TextMaskCustom as any,
      }}
      // 添加占位符提示格式
      placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    />
  );
};

export default GuidInput;

修正方案2：使用模式化掩码（更直观） #

对于固定格式的GUID，使用react-imask的模式化掩码（模板形式）会比正则更友好，输入时自动插入分隔符：

// 修改IMaskInput的mask配置为模板化格式
<IMaskInput
  {...other}
  // 模板掩码，自动插入分隔符
  mask="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  // 定义占位符x的匹配规则
  definitions={{
    'x': /[A-Za-z0-9]/
  }}
  inputRef={ref}
  onAccept={(value) => onChange({ target: { value } })}
  placeholderChar="_"
  type="text"
  overwrite={true}
/>

额外优化点 #

• 添加overwrite={true}：输入时自动覆盖占位符，提升用户输入流畅度
• 给TextField设置placeholder：明确提示用户GUID的格式要求
• 移除不必要的lazy={false}：默认的lazy模式已适配多数场景

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