gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 02:00:32 24 4
gpt4 key购买 nike

我有一个简单的表单,在 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

最佳答案

我按照@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>

关于reactjs - 使用 Controller、yup 和 Material UI 的 React Hook Form - 验证问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67253940/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com