![](/img/trans.png)
[英]Material-UI Checkbox is not reset while using react-hook-form reset function
[英]React hook form validation with Material-UI
我有一個 Next.js 項目,其中 Material-UI 作為 UI 框架。
我正在使用 React hooks 表單進行驗證。
我的主要組件有表單,我有不同輸入字段的子組件。
我的表單組件如下圖所示:
import { Paper } from "@material-ui/core";
import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import CPTextBox from "../../components/Form/CPTextBox";
import { useForm } from "react-hook-form";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
"& > *": {
margin: theme.spacing(1),
},
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
},
}));
function create2() {
const classes = useStyles();
const { control, register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<Paper className={classes.paper}>
<form onSubmit={handleSubmit(onSubmit)}>
<CPTextBox
attributes={{
name: "question",
id: "text_box_1",
label: "Enter the Question",
disabled: false,
type: "",
fullWidth: true,
control: { control },
}}
/>
<input type="submit" />
</form>
</Paper>
);
}
export default create;
CPTextBox 組件是這樣的:
import React, { useState } from "react";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import { Grid, TextField } from "@material-ui/core";
import { Controller } from "react-hook-form";
const useStyles = makeStyles((theme) => ({
formControl: {
// margin: theme.spacing(1),
minWidth: 120,
fullWidth: true,
},
textbox: {
width: "100%",
},
}));
export default function CPTextBox(props) {
const classes = useStyles();
return (
<FormControl fullWidth variant="outlined" className={classes.formControl}>
<Controller
as={TextField}
name={props.attributes.name}
control={props.attributes.control}
defaultValue=""
/>
</FormControl>
);
}
使用此代碼,它總是給出如下所示的錯誤:
服務器錯誤
TypeError:無法讀取未定義的屬性“isReValidateOnBlur”
錯誤的修復方法是什么?
屬性中的control
屬性不應為 object。 它應該是控制本身:
attributes={{
name: "question",
id: "text_box_1",
label: "Enter the Question",
disabled: false,
type: "",
fullWidth: true,
control: control,
}}
問題在於在屬性內傳輸控制 object:
<CPTextBox
attributes={{
name: "question",
id: "text_box_1",
label: "Enter the Question",
disabled: false,
type: "",
fullWidth: true,
**control: control ,**
}}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.