材质 UI 文本字段模式匹配

Question

Hi I am new to material ui I trying to textField only allows number,using patter but not working and also tried with number type it working But need with pattern matching only

Thanks for Help

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

Answer 1

it just makes an error for input:

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

Answer 2

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