如何设置 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

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

How can I set material-ui TextField to accept only Hexidecimal characters

restriction

textfield

reactjs

material-ui