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

Question

我有一个简单的表单，在 React Hook 表单中只有一个 Material UI TextField。我使用 Yup 模式验证(通过 yupResolver)。我尝试以视觉方式验证表单并显示错误(TextField 中的 bool 属性“error”)。我将 Controller 与 'render' Prop 一起使用，但是它无法在 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

Answer 1

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

<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>