<TextField
          id="text-field-1"
          placeholder="Enter text"
          type="text"
          value={state.alphanum}
          onChange={(event) => {
            const regex = /^([a-z0-9]){minLength,maxLength}$/i;
            if (event.target.value === '' || regex.test(event.target.value)) {
              setState({ ...state, alphanum: event.target.value });
            }
          }}
          variant="outlined" />

请参阅文档的格式化输入部分。

这是我使用仅接受最多 8 个十六进制字符的 react-text-mask 组合在一起的示例（使用格式化的输入演示代码作为起点）：

有时您想要的只是进行简单的正则表达式检查以不允许某些字符。没有掩码，没有额外的库，没有复杂的参考等。

const onlyAlphanumericRegex = /[^a-z0-9]/gi;

export default function App() {
  const [value, setValue] = React.useState("");

  return (
    <div className="App">
      <RegexTextField
        regex={onlyAlphanumericRegex}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}

RegexTextField 组件

export const matchNothingRegex = /(?!)/;

const RegexTextField = ({ regex, onChange, ...rest }) => {
  const handleChange = useCallback(
    (e) => {
      e.currentTarget.value = e.currentTarget.value.replace(regex, "");
      onChange(e);
    },
    [onChange, regex]
  );

  return <TextField onChange={handleChange} {...rest} />;
};

export default React.memo(RegexTextField);

RegexTextField.propTypes = {
  onChange: PropTypes.func.isRequired,
  regex: PropTypes.instanceOf(RegExp)
};

RegexTextField.defaultProps = {
  regex: matchNothingRegex
};

工作示例

https://codesandbox.io/s/materialui-regextextfield-sd6l8?file=/src/App.js