I m new on React , ı want to build form but submit button doesn't work. i am not getting error

I also looked at this document : https://react-hook-form.com/api/useform/handlesubmit

I want to work this console.log but I couldn't do it anyway const onSubmit = (data, e) => {console.log(data, e);}

How can fix it ?

import React, { useState } from "react";
import { makeStyles } from "@mui/styles";
import { useDispatch } from "react-redux";
import {
  Button,
  TextField,
  Select,
  Input,
  MenuItem,
  Dialog,
  DialogTitle,
  DialogActions,
  DialogContent,
  DialogContentText,
} from "@mui/material";
import { useForm, Controller } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/dist/ie11/yup";
import FileBase64 from "react-file-base64";

const useStyles = makeStyles({
  paper: {},
  textField: {},
});

const postSchema = yup.object().shape({
  title: yup.string().required(),
  subTitle: yup.string().required(),
  content: yup.string().min(10).required(),
});
const AddPostForm = ({ open, handleClose }) => {
  const dispatch = useDispatch();
  const [file, setFile] = useState(null);
  const { register, handleSubmit, control, errors, reset } = useForm({
    resolver: yupResolver(postSchema),
  });
  const classes = useStyles();
  const onSubmit = (data, e) => {
    console.log(data, e);
  };
  const one rror = (errors, e) => console.log(errors, e);
  const clearForm = () => {
    reset();
    setFile(null);
    handleClose();
  };
  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Yeni Yazı Oluştur</DialogTitle>
      <DialogContent>
        <DialogContentText>Yeni bir yazı eklemek için aşşağıdaki formu doldurun.</DialogContentText>
        <div className={classes.root}>
          <form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit, one rror)}>
            <TextField
              id="title"
              label="Başlık"
              name="title"
              variant="outlined"
              className={classes.textField}
              size="small"
              inputRef={register}
              fullWidth
            />
            <TextField
              id="subtitle"
              label="Alt Başlık"
              name="subtitle"
              variant="outlined"
              className={classes.textField}
              size="small"
              inputRef={register}
              fullWidth
            />

            <TextField
              id="content"
              label="İçerik"
              name="content"
              variant="outlined"
              multiline
              row={4}
              className={classes.textField}
              size="small"
              inputRef={register}
              fullWidth
            />
          </form>
        </div>
      </DialogContent>
      <DialogActions>
        <Button color="inherit" onClick={clearForm}>
          Vazgeç
        </Button>
        <Button type="submit" variant="outlined" color="primary">
          Yayınla
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default AddPostForm;

In the video I watched, it was like this before I changed it.it still doesn't work anyway so i changed it

 const onSubmit = (data)=>{
        console.log(data)
    }

 <form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)} >

<Button type="submit" variant="outlined" color="primary" onClick={()=>handleSubmit(onSubmit) ()} >Yayınla</Button>

CodePudding user response：

i think your submit button has to be in your form

CodePudding user response：

<Button type="submit" variant="outlined" color="primary">
    Yayınla
</Button>

this button must be inside of the form tag.