问题描述
我有一个简单的表单,在 React Hook 表单中只有一个 Material UI TextField。我使用 Yup 模式验证(通过 yupResolver)。我尝试验证表单并直观地显示错误(TextField 中的布尔道具“错误”)。我将控制器与“渲染”道具一起使用,但是它无法在 TextField 更改时更新错误。有谁知道我在这里做错了什么?
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>