How does this Form gets submited?

Question

Im currently trying to figure out, how this Form actually gets submitted without having an Input type of submit or an event handler that triggers the submission.

For my understanding this form does not get submited anyhow. Its just getting re-rendert with new data. Somehow this looks tricky to me.

Could someone give me explanation where this gets evaluated ?

Index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import Header from "./Header";
import Mui from "./Mui";
import ButtonsResult from "./ButtonsResult";
import { EditorState } from "draft-js";
import "react-datepicker/dist/react-datepicker.css";
import "antd/dist/antd.css";
import "./styles.css";

let renderCount = 0;

const defaultValues = {
  Native: "",
  TextField: "",
  Select: "",
  ReactSelect: { value: "vanilla", label: "Vanilla" },
  Checkbox: false,
  switch: false,
  RadioGroup: "",
  DraftJS: EditorState.createEmpty(),
  MUIPicker: new Date("2020-08-01T00:00:00")
  MUI_Slider: [0, 10]
};

function App() {
  const { handleSubmit, reset, setValue, control } = useForm({ defaultValues });
  const [data, setData] = useState(null);
  renderCount++;

  return (
    <form onSubmit={handleSubmit((data) => setData(data))} className="form">
      <Header renderCount={renderCount} />

      <Mui control={control} />

      <div className="container">
        <ButtonsResult {...{ data, reset, setValue }} />
      </div>
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ButtonResult.js

import React from "react";
import { convertToRaw } from "draft-js";

export default ({ data, reset }) => {
  return (
    <>
      {data && (
        <pre style={{ textAlign: "left", color: "white" }}>
          {JSON.stringify(
            {
              ...data,
              DraftJS: convertToRaw(data.DraftJS.getCurrentContent()).blocks[0]
                .text
            },
            null,
            2
          )}
        </pre>
      )}

      <button
        className="button buttonBlack"
        type="button"
        onClick={() => {
          reset({
            Native: "",
            TextField: "",
            Select: "",
            ReactSelect: { value: "vanilla", label: "Vanilla" },
            Checkbox: false,
            switch: false,
            RadioGroup: "",
            MUIPicker: new Date("2020-08-01T00:00:00"),
            MUI_Slider: [0, 10]
          });
        }}
      >
        Reset Form
      </button>
      <button className="button">submit</button>
    </>
  );
};

Live Example

score 2 · Accepted Answer · answered May 04 '21 at 18:22

2

The default type value for button elements is "submit." Since the second button does not have a type attribute assignment in the markup, it is a "submit" button.

answered May 04 '21 at 18:22

Jared A Sutton

369
3
8

Great explanation! Maybe you can also say if I'm right with this.. Is it correct that the default behavior of the `handleSubmit` method provided by the `react-hook-form` Library is keeping track that the form does not actually behaves like reloading the entire page ? Thanks :) – K.Kröger May 04 '21 at 18:39

score 1 · Answer 2 · answered May 04 '21 at 18:35

As per https://www.w3.org/TR/html401/interact/forms.html#h-17.5 (found via What is the default button type?) the default type of a button is "submit". Also, the form has an "onSubmit" handler, hence clicking the "submit" button will invoke that handler. In this case, the handler only sets the state:

(data) => setData(data)

And that explains the re-rendering of the form.

How does this Form gets submited?

Live Example

2 Answers2