Reactjs 如何将材质ui文本字段设置为仅接受十六进制字符

我希望我的文本字段只接受0-9和字母A-F中的值。谢谢。

请参阅文档部分

下面是一个示例（使用格式化输入演示代码作为起点），它使用react文本掩码，最多只接受8个十六进制字符：

{
const regex=/^（[a-z0-9]）{minLength，maxLength}$/i；
if（event.target.value==''|| regex.test（event.target.value））{
setState（{…状态，alphanum:event.target.value}）；
}
}}
variant=“概述”/>

有时，您只需要进行普通正则表达式检查，以不允许使用某些字符。没有遮罩，没有额外的库，没有复杂的引用等

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>
  );
}

const onlylphanumericregex=/[^a-z0-9]/gi；
导出默认函数App（）{
const[value，setValue]=React.useState（“”）；
返回(
setValue（e.target.value）}
/>
);
}

regextfield组件

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
};

导出常量matchNothingRegex=/（？！）/； 常量regextfield=（{regex，onChange，…rest}）=>{ const handleChange=useCallback( （e） =>{ e、 currentTarget.value=e.currentTarget.value.replace（正则表达式“”）； onChange（e）； }, [onChange，regex] ); 返回； }; 导出默认的React.memo（regextfield）； regextfield.propTypes={ onChange:PropTypes.func.isRequired， regex:PropTypes.instanceOf（RegExp） }; regextfield.defaultProps={ regex:matchNothingRegex }; 工作示例

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
};