Javascript 未触发提交时的反应挂钩窗体 import React，{useState}来自“React”； 从“react-file-base64”导入FileBase64； 从“react redux”导入{useDispatch}； 从“@material ui/core/styles”导入{makeStyles}”； 从“@material ui/core”导入{TextField，Select，Input，MenuItem，Button}； 从“react hook form”导入{useForm，Controller}； 从“@hookform/resolvers/yup”导入{yupResolver}”； 从“yup”导入*作为yup； 从“./actions/post”导入{updatePost}； const useStyles=makeStyles（（主题）=>({ 文本字段：{ marginBottom：主题。间距（2）， }, 按钮：{ marginTop：主题。间距（2）， }, })); const标签=[“乐趣”、“编程”、“健康”、“科学”]； const postSchema=yup.object（）.shape({ 标题：yup.string（）.required（）， 副标题：yup.string（）.required（）， 内容：yup.string（）.min（20）.required（）， tag:yup.mixed（）.oneOf（tags）， }); const EditPostForm=（{history，post，closeEditMode}）=>{ const dispatch=usedpatch（）； const[file，setFile]=useState（post？.image）； const{register，handleSubmit，control，errors，reset}=useForm({ 解析程序：yupResolver（postSchema）， }); const onSubmit=（数据）=>{ const updatedPost={ _id:post.\U id， …数据， 图像：文件， }; 派送（updatePost（post.\u id，updatedPost））； 重置（）； setFile（空）； closeEditMode（）； }; const classes=useStyles（）； 返回( ( { tags.map（（标记，索引）=>( {tag} )) } )} name='tag' control={control} error={errors？.tag？true:false} defaultValue={tags[0]} /> setFile（base64）}/> 瓦兹格ç {" "} 凯代特 ); }; 导出默认EditPostForm；

我有EditPostForm组件，该组件并没有给出任何错误，但当我试图提交表单时，并没有触发提交函数

我使用react钩子表单创建表单，并在表单中使用材质UI组件。

---

当我单击类型为submit的按钮时，不会触发onSbumit函数，该函数在handleSubmit内部调用。为什么onSubmit未被触发？

onSubmit

未被触发，因为您可能有表单错误

您可以从

formState

对象（

const{formState}=useForm（…）

）获取

errors

） 然后在代码中使用

error={formState.errors？.content？true:false}

请参见此处的示例

---

onSubmit

不会被触发，因为您可能有表单错误

您可以从

formState

对象（

const{formState}=useForm（…）

）获取

errors

） 然后在代码中使用

error={formState.errors？.content？true:false}

请参见此处的示例

---

您可以发布您的yup模式吗？代码似乎很好，我认为您的验证有问题。测试应用程序时，您可能在内容字段中键入少于28个字符。我建议您添加一些消息以便更好地进行调试。您还可以发布您的yup模式吗？代码似乎很好，我认为您的验证有问题。测试应用程序时，您可能在内容字段中键入少于28个字符。我建议您添加一些消息以便更好地调试。

import React, { useState } from "react";
import FileBase64 from "react-file-base64";
import { useDispatch } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import { TextField, Select, Input, MenuItem, Button } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { updatePost } from "../actions/post";

const useStyles = makeStyles((theme) => ({
  textField: {
    marginBottom: theme.spacing(2),
  },
  buttons: {
    marginTop: theme.spacing(2),
  },
}));

const tags = ["fun", "programming", "health", "science"];

const postSchema = yup.object().shape({
  title: yup.string().required(),
  subtitle: yup.string().required(),
  content: yup.string().min(20).required(),
  tag: yup.mixed().oneOf(tags),
});

const EditPostForm = ({ history, post, closeEditMode }) => {
  const dispatch = useDispatch();

  const [file, setFile] = useState(post?.image);
  const { register, handleSubmit, control, errors, reset } = useForm({
    resolver: yupResolver(postSchema),
  });

  const onSubmit = (data) => {
    const updatedPost = {
      _id: post._id,
      ...data,
      image: file,
    };
    dispatch(updatePost(post._id, updatedPost));

    reset();
    setFile(null);
    closeEditMode();
  };

  const classes = useStyles();
  return (
    <div>
      <form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
        <TextField
          id="title"
          label="Başlık"
          name="title"
          variant="outlined"
          className={classes.textField}
          size="small"
          {...register('title')}
          error={errors?.title ? true : false}
          fullWidth
          defaultValue={post?.title}
        />
        <TextField
          id="subtitle"
          label="Alt Başlık"
          name="subtitle"
          variant="outlined"
          className={classes.textField}
          size="small"
          {...register('subtitle')}
          error={errors?.subtitle ? true : false}
          fullWidth
          defaultValue={post?.subtitle}
        />
          <Controller 
            render={({field}) => (
                <Select
                    {...field}
                    input={<Input />}
                    className={classes.textField}
                    fullWidth
                >
                    {
                        tags.map((tag, index) => (
                            <MenuItem {...field} key={index} value={tag}>
                                {tag}
                            </MenuItem>
                        ))
                    }
                </Select>
            )}
            name='tag'
            control={control}
            error={errors?.tag ? true : false}
            defaultValue={tags[0]}
        />
        <TextField
          id="content"
          label="İçerik"
          name="content"
          multiline
          size="small"
          {...register('content')}
          rows={16}
          className={classes.textField}
          variant="outlined"
          error={errors?.content ? true : false}
          fullWidth
          defaultValue={post?.content}
        />
        <FileBase64 multiple={false} onDone={({ base64 }) => setFile(base64)} />
        <div className={classes.buttons}>
          <Button color="primary" variant="outlined" onClick={closeEditMode}>
            Vazgeç
          </Button>{" "}
          <Button color="secondary" variant="outlined" type="submit" >
            Kaydet
          </Button>
        </div>
      </form>
    </div>
  );
};

export default EditPostForm;