材质 UI 文本字段模式匹配

Posted 2023-02-22

【中文标题】材质 UI 文本字段模式匹配

【英文标题】：Material Ui Textfield Pattern matching

【发布时间】：2022-01-02 14:52:48

【问题描述】：

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

感谢您的帮助

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

【参考方案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