Material-UI 1.0.0-beta.24中TextField组件掩码设置求助

嘿，刚好我对这个早期beta版本的Material-UI有点印象，给你几个不会破坏现有页面设计的解决方案：

方案一：用react-input-mask配合TextField的inputComponent #

这个方法是最省心的，既保留TextField的所有样式，又能快速实现掩码功能。因为beta24的TextField支持通过inputComponent替换内部的输入组件，我们可以直接把带掩码的组件传进去：

1. 先安装适配版本的react-input-mask（因为你的Material-UI版本比较老，建议用2.x分支，避免兼容性问题）：

npm install react-input-mask@2.x

2. 封装一个带掩码的TextField组件：

import TextField from '@material-ui/core/TextField';
import InputMask from 'react-input-mask';

// 自定义掩码TextField
const MaskedTextField = ({ mask, maskChar = " ", ...props }) => {
  return (
    <TextField
      {...props}
      inputComponent={(inputProps) => (
        <InputMask {...inputProps} mask={mask} maskChar={maskChar} />
      )}
    />
  );
};

// 使用示例：比如手机号掩码
<MaskedTextField
  label="手机号码"
  mask="(999) 999-9999"
  variant="outlined"
  fullWidth
/>

这个方式完全复用了你原来TextField的样式和布局，不会出现设计破坏的问题，而且支持各种复杂掩码格式。

方案二：手动实现简单掩码（无额外依赖） #

如果你的掩码需求比较简单（比如手机号、邮编），可以直接通过TextField的onChange事件手动处理输入内容，不需要引入第三方库：

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';

const SimpleMaskedTextField = () => {
  const [phoneValue, setPhoneValue] = useState('');

  const handlePhoneChange = (e) => {
    // 先过滤掉所有非数字字符
    let rawValue = e.target.value.replace(/\D/g, '');
    let formattedValue = '';

    if (rawValue.length > 0) {
      // 拼接区号部分
      formattedValue = `(${rawValue.substring(0, 3)}`;
      // 拼接中间三位
      if (rawValue.length > 3) {
        formattedValue += `) ${rawValue.substring(3, 6)}`;
      }
      // 拼接最后四位
      if (rawValue.length > 6) {
        formattedValue += `-${rawValue.substring(6, 10)}`;
      }
    }

    setPhoneValue(formattedValue);
  };

  return (
    <TextField
      label="手机号码"
      value={phoneValue}
      onChange={handlePhoneChange}
      variant="outlined"
    />
  );
};

这个方法的好处是完全可控，没有外部依赖，适合简单场景。

方案三：修正官方Input组件的用法（如果你想坚持用官方组件） #

你之前说用官方Input组件破坏了设计，大概率是没有正确嵌套在TextField里。beta24的TextField可以通过inputComponent传入官方Input，再结合掩码逻辑：

import TextField from '@material-ui/core/TextField';
import Input from '@material-ui/core/Input';

const CustomMaskedInput = (props) => {
  const { value, onChange, ...rest } = props;

  const handleMaskChange = (e) => {
    // 这里写你的掩码处理逻辑，和方案二类似
    let rawValue = e.target.value.replace(/\D/g, '');
    let formattedValue = rawValue.length > 3 ? `${rawValue.slice(0,3)}-${rawValue.slice(3)}` : rawValue;
    onChange({ target: { ...e.target, value: formattedValue } });
  };

  return <Input {...rest} value={value} onChange={handleMaskChange} />;
};

// 使用时
<TextField
  label="邮编"
  inputComponent={CustomMaskedInput}
  variant="filled"
/>

这样既用到了官方Input组件，又不会破坏TextField的原有样式。

注意事项 #

因为你用的是1.0.0-beta.24这个早期版本，尽量避免使用最新版的第三方库，比如react-input-mask一定要用2.x版本，3.x版本可能依赖更高的React版本，会出现兼容性问题。

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