材质 UI 文本字段模式匹配

【问题标题】：Material Ui Textfield Pattern matching材质 UI 文本字段模式匹配
【发布时间】：2022-01-02 14:52:48
【问题描述】：

您好，我是材料 ui 的新手，我尝试 textField 只允许数字，使用模式但不工作，还尝试使用数字类型它工作但只需要模式匹配

感谢您的帮助

<TextField
  name="salary"
  value={salary}
  variant="outlined"
  size="small"                          
  fullWidth
  autoComplete="off"
  pattern="[0-9]+"
 />

【问题讨论】：

标签： reactjs react-hooks material-ui

【解决方案1】：

它只是输入错误：

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  input: {
    "&:invalid": {
      border: "red solid 2px"
    }
  }
};
function App({ classes }) {
  return (
    <TextField
      inputProps={{ className: classes.input, pattern: "[0-9]{1,15}" }}
    />
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

codesandbox

【讨论】：