reactjs - Material-ui 4.9.5 TextField 属性 "required"不工作

Question

我有一个带有“必需”属性的简单 TextField。它在 html 'input' 元素中生成 'required=""'，因此不会触发所需的错误消息(我相信这是 TextField 'required' 属性的预期机制)。请看下面的代码和codesandbox

import React from "react";
import { TextField, Button } from "@material-ui/core";

export default function App() {
   return (

   <div className="App">
       <TextField required label="LoftyPine" />
       <Button variant="contained" onClick={() => {}}>
       Validate
      </Button>
   </div>

   );
}

Same CodeSandbox

Answer 1

为了触发浏览器默认的必需错误消息，TextField 需要在表单中，您需要触发验证。有几种方法可以触发验证，例如单击带有 type="submit" 的按钮或调用 reportValidity在表格上。

这是一个显示调用 reportValidity 的示例:

import React from "react";
import { TextField, Button } from "@material-ui/core";

export default function App() {
  const formRef = React.useRef();
  return (
    <div className="App">
      <form ref={formRef}>
        <TextField required label="LoftyPine" />
        <Button
          variant="contained"
          onClick={() => formRef.current.reportValidity()}
        >
          Validate
        </Button>
      </form>
    </div>
  );
}