这个表格是如何提交的？

Question

我目前正在尝试弄清楚，在没有提交输入类型或触发提交的事件处理程序的情况下，这个表单实际上是如何提交的。

据我所知，无论如何都不会提交此表单。它只是用新数据重新渲染。这对我来说有点棘手。

有人可以给我解释一下这是在哪里评估的吗？

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>
    </>
  );
};

实例

Answer 1

button 元素的默认 type 值由于第二个按钮在标记中没有 type 属性分配，它是一个“提交”按钮。

Answer 2

根据 https://www.w3.org/TR/html401/interact/forms.html#h-17.5 (found via ) 按钮的默认类型是“提交”。此外，表单有一个“onSubmit”处理程序，因此单击“提交”按钮将调用该处理程序。在这种情况下，处理程序仅设置状态：

(data) => setData(data)

这就解释了表单的重新呈现。

这个表格是如何提交的？

How does this Form gets submited?

javascript

reactjs

react-hook-form

实例