javascript 如何使用Material-UI TextField在ReactJS中创建一个仅用于数字输入验证的通用组件？

eufgjt7s 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(161)

我正在使用MUI TextField。我的任务是只对数字进行验证，这些eE+-键将不被接受。我想使用onChange为此创建一个标准组件。如果用户输入这个键eE+-，我想处理这个。我需要抛出一个无效的错误，我尝试了一些想要的，但不能正常工作，因为对于一个数字，这个字段将被认为是未定义的，我也不希望用户从关键字限制，因为在某些情况下也是有效的。

this is valid 
+1
-1
1e1

this blow is invalid
e
1-
1+
12e

const NumberField = ({ ...props }) => {
  return (
    <TextField
      {...props}
      type="number"
      //   inputProps={{ inputMode: 'numeric', pattern: '/^(0|[1-9]d*)$/' }}
      onChange={(e) => {
        if (e.target.value === '' || !/[eE+-]/.test(e.target.value)) {
          props.onChange(e);
        } else {
          return false;
        }
      }}
      error={props.errorMsg}
    />
  );
};

JavaScript

来源：https://stackoverflow.com/questions/76320203/how-to-create-a-common-component-for-numbers-only-input-validation-in-reactjs-us

1条答案

按热度按时间

xesrikrc1#

让你的可重用的数字textField像这样：

import { TextField as MuiTextField, TextFieldProps } from "@mui/material";
import * as styles from "./styles";
import type * as types from "./types";

const TextField: React.FC<TextFieldProps> = (props: types.ITextFieldProps) => {
  const { sx, required, label, ...restProps } = props;
  const sxStyle = { ...styles.input, ...sx };

  return (
    <MuiTextField
      fullWidth
      size="small"
      sx={sxStyle}
      label={
        label ? (
          <>
            {label} {required ? "*" : ""}
          </>
        ) : undefined
      }
      onKeyPress={enNumberConvertor}
      {...restProps}
    />
  );
};

export { TextField };
export default TextField;

并将enNumberConvertor函数传递给onKeyPress

const Number = /^[0-9]+$/;

const enNumberConvertor = (e: React.KeyboardEvent<HTMLDivElement>) => {
let regex = new RegExp(Number);
  let str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
  if (regex.test(str)) return true;
  e.preventDefault();
  return false;
};

这也是十进制和十进制正数的正则表达式

const decimalNumber = /^(-)?\d*(\.\d{0,3})?$/g;
const decimalPositiveNum = /^\d*(\.\d{0,3})?$/g;

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 如何使用Material-UI TextField在ReactJS中创建一个仅用于数字输入验证的通用组件？

1条答案

相关问题

热门标签

最新问答