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

【问题标题】：Error: Form submission canceled because the form is not connected错误：由于表单未连接，表单提交被取消
【发布时间】：2021-02-23 05:02:55
【问题描述】：

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

我有一个应用程序，前端是 React，后端是烧瓶服务器。我有一个大问题。代码似乎检查了前端和后端，但是在我单击表单的提交按钮后，我在 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”。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当点击其中type="submit"的按钮时，浏览器正在尝试通过表单上的方法将您的表单提交到当前URL。

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

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

【讨论】：

将按钮类型更改为按钮意味着当我点击提交时，没有任何反应。我添加了 e.preventDefault();而且这个错误消失了，所以这很酷 - 谢谢。但是，该值未呈现，我在 JS 控制台中收到内部服务器错误，并且 AttributeError: 'NoneType' 对象在终端中没有属性 'upper'。有什么想法吗？
@timman：您的错误在 python 后端。您问了一个标记为 javascript 的问题。如果您在调试烧瓶应用程序时需要帮助，请发布一个新问题。
是的，会的。谢谢你让我走到这一步。
看起来您的表单现在可以正确提交。我同意@HåkenLid。我会问一个新问题，关于如何处理请求并在服务器端提取带有python 和flask 标记的数据。
您可以尝试将request.form 更改为request.json 或使用axios 发布表单数据而不是json。

【解决方案2】：

当我在表单标签中有一个按钮时收到此警告 - 按钮单击处理程序导航离开页面

表单内按钮的默认行为是 type="submit"

当我将按钮更改为 type="button" 时警告消失了

在我的情况下，我不希望按钮提交表单 - 否则，如果按钮用于提交表单，则使用 @ksav 的答案

【讨论】：