React Hook Form 使用 Controller、是的和 Material UI - 验证问题

如何解决React Hook Form 使用 Controller、是的和 Material UI - 验证问题

我有一个简单的表单，在 React Hook 表单中只有一个 Material UI TextField。我使用 Yup 模式验证（通过 yupResolver）。我尝试验证表单并直观地显示错误（TextField 中的布尔道具“错误”）。我将控制器与“渲染”道具一起使用，但是它无法在 TextField 更改时更新错误。有谁知道我在这里做错了什么？

Link to codesandbox

import React from "react";
import ReactDOM from "react-dom";
import { TextField } from "@material-ui/core";
import { Controller,useForm } from "react-hook-form";
import * as yup from "yup";

import { yupResolver } from "@hookform/resolvers/yup";
import "./styles.css";

const schema = yup.object().shape({
  title: yup.string().required("required")
});

function App() {
  const {
    handleSubmit,formState: { errors },control
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data) => console.log("onSubmit",data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ formState,fieldState }) => {
          return <TextField label="Title" error={!!formState.errors?.title} />; 
        }}
        name="title"
        control={control}
      />
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

此外，Controller 中的“fieldState”似乎一直是一个空对象。它不应该显示中列出的属性 Link

解决方法

您没有将 material-ui 组件连接到 react-hook-form，您应该查看 react-hook-form 文档的 Integrating Controlled Inputs 部分。

,

我按照@damjtoh 的建议找到了答案。我注意到 RHF 代码示例中的渲染函数中有一个“字段”参数。将其添加到带有表单的 TextField 连接组件中。请记住添加“defaultValue”以避免“更改不受控制的输入”错误。它应该是这样的：

<form onSubmit={handleSubmit(onSubmit)}>
    <Controller
    render={({ field,formState }) => (
        <TextField
        {...field}
        label="Title"
        error={!!formState.errors?.title}
        />
    )}
    name="title"
    control={control}
    defaultValue=""
    />
    <input type="submit" />
</form>