错误：由于表单未连接，表单提交被取消

Question

关于潜在重复的免责声明：我也遇到过类似的问题，我想我现在已经阅读了几乎所有这些答案，但没有一个为我解决了问题。

我有一个应用程序，前端是 React，后端是 Flask 服务器。我有一个重大问题。代码似乎检查了前端和后端，但是当我单击表单的提交按钮后，我在 JS 控制台中收到错误：Form submission canceled because the form is not connected.

现在，我的表单上只有一个按钮，并且该按钮的类型为submit，handleSubmit处理程序位于form标记中，因此我认为这不会导致问题。我还添加了此配置对象来处理潜在的 CORS 错误，但至少我没有收到任何 CORS 错误。

React 表单组件代码：

import React, { useState } from "react";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { TextField } from "@material-ui/core";
import DisplayUpper from "./DisplayUpper";

function Form() {
  const [inputText, setInputText] = useState("");
  const [fetchedData, setFetchedData] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    setSubmitted(true);

    console.log("button clicked");

    const config = {
      headers: { "Access-Control-Allow-Origin": "*" },
    };

    axios
      .post(
        "http://localhost:5000/process",
        {
          inputText: inputText,
        },
        config
      )
      .then((res) => {
        console.log("res", res);
        setFetchedData(res.data);
      })
      .catch((er) => {
        console.log(er);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit} method="post">
        <label>
          Enter Text :
          <TextField
            multiline={true}
            variant="outlined"
            name="inputText"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
          />
        </label>
        <Button variant="contained" color="primary" type="submit" name="Submit">
          SUBMIT
        </Button>
      </form>
      {isSubmitted && <DisplayUpper />}
    </div>
  );
}

export default Form;

然后，app.py代码：

@app.route('/process', methods=['POST'])
def result():
    text = request.form.get('inputText')
    upper_text = text.upper()
    print(upper_text)
    return upper_text

我在 package.json 中设置代理：“http://localhost:5000”。

Answer 1

type="submit"当单击表单内部的按钮时，浏览器会尝试通过表单上的方法将表单提交到当前 URL 。

注意：如果您没有type在 上设置属性<button>，则将使用 的默认值submit。

当您使用 javascript 处理表单提交时，您应该防止表单的默认行为：

const handleSubmit = (e) => {
  e.preventDefault();
  ...
}