React JS，一种形式的两个提交按钮

Question

使用 React JS 时，如何识别是哪个按钮用于提交表单？我以为这样的事情会奏效，但事实并非如此。

export default function App() {
  const onSubmit = e => {
    e.preventDefault();
    console.log(e.target.btn.value);
  };

  return (
    <form className="App" onSubmit={onSubmit}>
      <button type="submit" name="btn" value="wow">
        Button 1
      </button>
      <button type="submit" name="btn" value="oh no">
        Button 2
      </button>
    </form>
  );
}

代码沙箱

根据标准 HTML，您应该能够将两个按钮命名为相同的名称吗？或者使用formaction属性来区分它们。

在我的用例中，按钮不了解表单。我想避免使用一些临时状态来记住单击了哪个按钮的解决方案。

在标准 HTML 中，您可以这样做：

<form action="/action_page.php">
  <input type="submit" name="btn" value="Submit">
  <input type="submit" name="btn" value="Submit2">
</form> 

当您提交表单btn时，将发布Submit或Submit2取决于您单击的按钮。我想在构建我的 React 表单时尽可能接近这个标准。尽可能少地使用 Javascript 和 React 的帮助。基本上只需将按钮添加到我的表单内的 DOM 并从我有权访问的提交处理程序内部的事件中收集值。

Answer 1

尝试使用event.submitter.name属性。将不同的添加name到您的按钮并在 中检查它们的名称eventHandler。如果您使用某种库来制作表单，它可能位于e.nativeEvent.submitter.name
更多信息https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter

Answer 2

您可以尝试以下代码，也可以尝试分别调用两个按钮。

演示链接代码andox

import React from "react";
import "./styles.css";

export default function App() {
  const state = {
    button: 1
  };

  const onSubmit = e => {
    e.preventDefault();
    if (state.button === 1) {
      console.log("Button 1 clicked!");
    }
    if (state.button === 2) {
      console.log("Button 2 clicked!");
    }
  };

  return (
    <form className="App" onSubmit={onSubmit}>
      <button
        onClick={() => (state.button = 1)}
        type="submit"
        name="btn1"
        value="wow"
      >
        Button 1
      </button>
      <button
        onClick={() => (state.button = 2)}
        type="submit"
        name="btn2"
        value="oh no"
      >
        Button 2
      </button>
    </form>
  );
}