Javascript 使用物料UI进行钩形表单验证

我有一个Next.js项目，其中MaterialUI作为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;

从“@material ui/core”导入{Paper}”；
从“React”导入React；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
从“../../components/Form/CPTextBox”导入CPTextBox；
从“react hook form”导入{useForm}；
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
"& > *": {
边距：主题。间距（1），
},
},
论文：{
填充：主题。间距（2），
textAlign：“居中”，
颜色：theme.palete.text.secondary，
},
}));
函数create2（）{
const classes=useStyles（）；
const{control，register，handleSubmit}=useForm（）；
const onSubmit=（数据）=>{
控制台日志（数据）；
};
返回(
);
}
导出默认创建；

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>
  );
}

从“React”导入React，{useState}；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/styles”导入{makeStyles，useTheme}”；
从“@material ui/core”导入{Grid，TextField}；
从“react hook form”导入{Controller}；
const useStyles=makeStyles（（主题）=>({
表单控制：{
//边距：主题。间距（1），
最小宽度：120，
全宽：对，
},
文本框：{
宽度：“100%”，
},
}));
导出默认功能CPTextBox（道具）{
const classes=useStyles（）；
返回(
);
}

使用此代码时，总是会出现如下所示的错误：

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;

服务器错误
TypeError:无法读取未定义的属性“isReValidateOnBlur”

错误的修复方法是什么？

问题在于在属性中传输控制对象：

<CPTextBox
          attributes={{
            name: "question",
            id: "text_box_1",
            label: "Enter the Question",
            disabled: false,
            type: "",
            fullWidth: true,
            **control: control ,**
          }}
        />

---

属性中的

控件

属性不应是对象。它应该控制自己：

attributes={{
            name: "question",
            id: "text_box_1",
            label: "Enter the Question",
            disabled: false,
            type: "",
            fullWidth: true,
            control: control,
          }}