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

Question

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

Answer 1

请参阅文档的Formatted Inputs部分。

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

Answer 2

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

Answer 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