在 React/Bootstrap 4 中，禁用按钮以防止重复提交表单的正确方法是什么？

Question

我正在使用 React 16.13 和 Bootstrap 4。我有以下表单容器...

const FormContainer = (props) => {
    ...
  const handleFormSubmit = (e) => {
    e.preventDefault();
    CoopService.save(coop, setErrors, function(data) {
      const result = data;
      history.push({
        pathname: "/" + result.id + "/people",
        state: { coop: result, message: "Success" },
      });
      window.scrollTo(0, 0);
    });
  };

  return (
    <div>
      <form className="container-fluid" onSubmit={handleFormSubmit}>
        <FormGroup controlId="formBasicText">
    ...
          {/* Web site of the cooperative */}
          <Button
            action={handleFormSubmit}
            type={"primary"}
            title={"Submit"}
            style={buttonStyle}
          />{" "}
          {/*Submit */}
        </FormGroup>
      </form>
    </div>
  );

是否有一种标准方法可以禁用提交按钮以防止重复提交表单？问题是，如果从服务器返回的表单中有错误，我希望再次启用该按钮。下面是我上面引用的“CoopService.save”...

...
  save(coop, setErrors, callback) {
    // Make a copy of the object in order to remove unneeded properties
    coop.addresses[0].raw = coop.addresses[0].formatted;
    const NC = JSON.parse(JSON.stringify(coop));
    delete NC.addresses[0].country;
    const body = JSON.stringify(NC);
    const url = coop.id
      ? REACT_APP_PROXY + "/coops/" + coop.id + "/"
      : REACT_APP_PROXY + "/coops/";
    const method = coop.id ? "PUT" : "POST";
    fetch(url, {
      method: method,
      body: body,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw response;
        }
      })
      .then((data) => {
        callback(data);
      })
      .catch((err) => {
        console.log("errors ...");
        err.text().then((errorMessage) => {
          console.log(JSON.parse(errorMessage));
          setErrors(JSON.parse(errorMessage));
        });
      });
  }

不确定它是否相关，但这是我的 Button 组件。愿意更改它或上述内容以帮助实施一种标准的、开箱即用的方法来解决这个问题。

import React from "react";
  
const Button = (props) => {
  return (
    <button
      style={props.style}
      className={
        props.type === "primary" ? "btn btn-primary" : "btn btn-secondary"
      }
      onClick={props.action}
    >
      {props.title}
    </button>
  );
};

export default Button;

Answer 1

Greg 已经提到 this link 向您展示如何使用组件状态来存储按钮是否被禁用。

然而，最新版本的 React 使用带有钩子的功能组件，而不是 this.state 或 this.setState(...)。以下是您可以采取的方法：

import { useState } from 'react';

const FormContainer = (props) => {
  ...
  const [buttonDisabled, setButtonDisabled] = useState(false);
  ...
  const handleFormSubmit = (e) => {
    setButtonDisabled(true); // <-- disable the button here
    e.preventDefault();
    CoopService.save(coop, (errors) => {setButtonDisabled(false); setErrors(errors);}, function(data) {
      const result = data;
      history.push({
        pathname: "/" + result.id + "/people",
        state: { coop: result, message: "Success" },
      });
      window.scrollTo(0, 0);
    });
  };

  return (
    ...
          <Button
            action={handleFormSubmit}
            disabled={buttonDisabled} // <-- pass in the boolean
            type={"primary"}
            title={"Submit"}
            style={buttonStyle}
          />
       ...
  );

const Button = (props) => {
  return (
    <button
      disabled={props.disabled} // <-- make sure to add it to your Button component
      style={props.style}
      className={
        props.type === "primary" ? "btn btn-primary" : "btn btn-secondary"
      }
      onClick={props.action}
    >
      {props.title}
    </button>
  );
};

我写了一些乱七八糟的内联代码来替换您的 setErrors 函数，但您可能希望将 setButtonDisabled(false); 添加到您最初定义的 setErrors 函数中，而不是像我这样从匿名函数调用它做过;所以请记住这一点。

更多关于useState钩子的信息可以在here找到。如果这能回答您的问题，请告诉我。

Answer 2

正如其他人所说，禁用按钮是一个完美的解决方案。但我不喜欢按钮在提交时更改其视觉效果。

您应该改为设置按钮的 css 属性 pointer-events: none，这将关闭所有事件的发出。一旦提交完成或失败，您可以删除该属性。