此表格如何提交？

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

Answer 1

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.

Answer 2

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.