材質 UI 文本字段模式匹配

Question

嗨，我是材料 ui 的新手，我嘗試 textField 只允許數字，使用模式但不工作，還嘗試使用數字類型它工作但只需要模式匹配

感謝幫助

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

Answer 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);

密碼箱

Answer 2

<TextField
  name="salary"
  value={salary}
  variant="outlined"
  size="small"                          
  fullWidth
  autoComplete="off"
  type="number" // this is the trick
 />