如何将 material-ui TextField 设置为仅接受十六进制字符

Posted 2023-02-22

【中文标题】如何将 material-ui TextField 设置为仅接受十六进制字符

【英文标题】：How can I set material-ui TextField to accept only Hexidecimal characters

【发布时间】：2019-05-27 15:56:27

【问题描述】：

我希望我的 TextField 只接受 0-9 和字母 A-F 的值。谢谢。

【参考方案1】：

        <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" />

【参考方案2】：

请参阅文档的Formatted Inputs 部分。

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

【参考方案3】：

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

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