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

【问题标题】：Material-ui 4.9.5 TextField attribute "required" not workingMaterial-ui 4.9.5 TextField 属性“必需”不起作用
【发布时间】：2020-05-01 19:39:42
【问题描述】：

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

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

【问题讨论】：

标签： reactjs material-ui

【解决方案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>
  );
}

【讨论】：

它可以工作，但我认为这不是它的预期方式。生成的 html 元素，如 devtool 检查器中所见，确实会生成带有 'required=""' 的 HTML bold'input'bold 元素，这在普通 html 中也可以不起作用，除非它只是 bold'required'bold 而没有 =""。生成的元素是：bold****bold
Material-UI 没有这样的翻译。 required 作为布尔属性添加。当我通过开发工具查看此内容时，我发现 required 属性与普通 html 页面（例如 jsfiddle.net/2gdycven）没有任何不同。
你说得对，它需要一个封闭的 html
元素，而 Material FormControl 并没有真正做到这一点。想知道如果您提供的 DOM ref hack 绕过了必需的，为什么他们甚至具有“必需”属性，有点 - 非常感谢！我学到了很多
我不确定您所说的“绕过要求”是什么意思。 Material-UI 对required 属性所做的唯一事情是在标签上添加一个星号，并将该属性传递给<input> 元素。您可以执行任何您想要的验证。
可以想象，Material-ui FormControl 和 Input 将装饰一个 TextField，以反映 html 架构。 Material-ui FormControl 文档说“为表单输入提供诸如填充/聚焦/错误/**粗体必需粗体**之类的上下文。依赖上下文提供了高度的灵活性并确保状态始终保持不变在 FormControl 的子项之间保持一致”并且对于 TextField：“TextField 包装器组件是一个完整的表单控件，包括标签、输入和帮助文本。”这似乎很奇怪，如果它是一个完整的“表单控件”那不是他们似乎做的。

【解决方案2】：

感谢@Ryan 指路。通过使用 TextField 组件的 inputRef 属性，在不混合任何 html（如 form ）的情况下，还有另一种变体，它会创建？并将引用传递给input 元素。如果我们有多个 TextField ，缺点是您必须在每个元素上使用 reportValidity，但优点是您可以更好地控制验证序列和其他输入级功能。

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

export default function App() {

  let myRef = {}
  return (
    <div className="App">
      <TextField required inputRef={myRef} label="LoftyPine" />
      <Button variant="contained" onClick={() => {myRef.current.reportValidity()}}>
        Validate
      </Button>
    </div>
  );
}`

WIthoutHtmlForm

【讨论】：