此表单如何提交？答案

【问题标题】：How does this Form gets submited?此表单如何提交？
【发布时间】：2021-05-04 18:16:39
【问题描述】：

我目前正试图弄清楚，在没有 Input 类型的提交或触发提交的事件处理程序的情况下，如何实际提交此表单。

据我了解，无论如何都不会提交此表单。它只是用新数据重新渲染。不知何故，这对我来说看起来很棘手。

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

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

现场示例

【问题讨论】：

标签： javascript reactjs react-hook-form

【解决方案1】：

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

【讨论】：

很好的解释！也许你也可以说我是否正确.. react-hook-form Library 提供的 handleSubmit 方法的默认行为是否正确地跟踪表单实际上并不像重新加载整个页面一样？谢谢:)

【解决方案2】：

根据https://www.w3.org/TR/html401/interact/forms.html#h-17.5（通过What is the default button type? 找到），按钮的默认类型是“提交”。此外，表单有一个“onSubmit”处理程序，因此单击“提交”按钮将调用该处理程序。在这种情况下，处理程序只设置状态：

(data) => setData(data)

这就解释了表单的重新渲染。

【讨论】：