Material-ui 4.9.5 TextField 属性“必需”不起作用

Question

我有一个带有“必需”属性的简单文本字段。它在 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>

   );
}

相同的 代码沙箱

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