React-hook-form onSubmit 未触发

Question

import React, { useState } from "react";\nimport FileBase64 from "react-file-base64";\nimport { useDispatch } from "react-redux";\nimport { makeStyles } from "@material-ui/core/styles";\nimport { TextField, Select, Input, MenuItem, Button } from "@material-ui/core";\nimport { useForm, Controller } from "react-hook-form";\nimport { yupResolver } from "@hookform/resolvers/yup";\nimport * as yup from "yup";\nimport { updatePost } from "../actions/post";\n\nconst useStyles = makeStyles((theme) => ({\n  textField: {\n    marginBottom: theme.spacing(2),\n  },\n  buttons: {\n    marginTop: theme.spacing(2),\n  },\n}));\n\nconst tags = ["fun", "programming", "health", "science"];\n\nconst postSchema = yup.object().shape({\n  title: yup.string().required(),\n  subtitle: yup.string().required(),\n  content: yup.string().min(20).required(),\n  tag: yup.mixed().oneOf(tags),\n});\n\nconst EditPostForm = ({ history, post, closeEditMode }) => {\n  const dispatch = useDispatch();\n\n  const [file, setFile] = useState(post?.image);\n  const { register, handleSubmit, control, errors, reset } = useForm({\n    resolver: yupResolver(postSchema),\n  });\n\n  const onSubmit = (data) => {\n    const updatedPost = {\n      _id: post._id,\n      ...data,\n      image: file,\n    };\n    dispatch(updatePost(post._id, updatedPost));\n\n    reset();\n    setFile(null);\n    closeEditMode();\n  };\n\n  const classes = useStyles();\n  return (\n    <div>\n      <form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)}>\n        <TextField\n          id="title"\n          label="Ba\xc5\x9fl\xc4\xb1k"\n          name="title"\n          variant="outlined"\n          className={classes.textField}\n          size="small"\n          {...register('title')}\n          error={errors?.title ? true : false}\n          fullWidth\n          defaultValue={post?.title}\n        />\n        <TextField\n          id="subtitle"\n          label="Alt Ba\xc5\x9fl\xc4\xb1k"\n          name="subtitle"\n          variant="outlined"\n          className={classes.textField}\n          size="small"\n          {...register('subtitle')}\n          error={errors?.subtitle ? true : false}\n          fullWidth\n          defaultValue={post?.subtitle}\n        />\n          <Controller \n            render={({field}) => (\n                <Select\n                    {...field}\n                    input={<Input />}\n                    className={classes.textField}\n                    fullWidth\n                >\n                    {\n                        tags.map((tag, index) => (\n                            <MenuItem {...field} key={index} value={tag}>\n                                {tag}\n                            </MenuItem>\n                        ))\n                    }\n                </Select>\n            )}\n            name='tag'\n            control={control}\n            error={errors?.tag ? true : false}\n            defaultValue={tags[0]}\n        />\n        <TextField\n          id="content"\n          label="\xc4\xb0\xc3\xa7erik"\n          name="content"\n          multiline\n          size="small"\n          {...register('content')}\n          rows={16}\n          className={classes.textField}\n          variant="outlined"\n          error={errors?.content ? true : false}\n          fullWidth\n          defaultValue={post?.content}\n        />\n        <FileBase64 multiple={false} onDone={({ base64 }) => setFile(base64)} />\n        <div className={classes.buttons}>\n          <Button color="primary" variant="outlined" onClick={closeEditMode}>\n            Vazge\xc3\xa7\n          </Button>{" "}\n          <Button color="secondary" variant="outlined" type="submit" >\n            Kaydet\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n};\n\nexport default EditPostForm;\n

\n

我有 EditPostForm 组件，组件不会给出任何错误，但是当我尝试提交表单时，不会触发 onSubmit 函数。

\n

我使用react-hook-form来创建我的表单，并在表单内使用了材质UI组件。\n当我单击具有提交类型的按钮时，不会触发在handleSubmit内部调用的onSubmit函数。为什么onSubmit没有被触发？

\n

Answer 1

onSubmit未触发，因为您可能存在表单错误

errors你可以从formStateobject ( ) 中获取const { formState } = useForm(...)，然后error={formState.errors?.content ? true : false}在你的代码中 使用https://react-hook-form.com/api/useform/formstate

请参阅此处的示例 https://codesandbox.io/s/keen-burnell-2yufj?file=/src/App.js

Answer 2

您需要同时传递onSubmit和onError。

像这样：

onPress={handleSubmit(onSubmit, onErrors)}