Material-ui 4.9.5 Атрибут TextField «обязательный» не работает

Question

У меня есть простое TextField с обязательным атрибутом. Он сгенерировал 'required = "" в элементе html' input 'и, следовательно, не вызывает обязательное сообщение об ошибке (я полагаю, что это предполагаемый механизм для атрибута TextField' required '). Пожалуйста, смотрите код ниже и коды и поле

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>

   );
}

То же CodeSandbox

Answer 1

Спасибо @Ryan за указание пути. Есть еще один вариант без смешивания html, например form, с использованием inputRef проп компонента TextField, который создает? и передает ссылку на элемент 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

Answer 2

Чтобы вызвать требуемое по умолчанию сообщение об ошибке браузера, 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>
  );
}