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屬性來區分它們。

在我的用例中，按鈕不了解表單。 我想避免使用一些臨時的 state 來記住單擊了哪個按鈕的解決方案。

在標准 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

您可以嘗試以下代碼，也可以嘗試分別調用兩個按鈕。

演示鏈接codeandox

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

Answer 3

您可以通過使用 onSubmit 函數中的document.activeElement檢查當前具有焦點的元素來確定單擊了哪個按鈕。 向按鈕添加不同的 id 或數據屬性以確定單擊了哪個按鈕。

Answer 4

如果您知道輸入是如何工作的，那么在 ReactJS 中使用表單是相當直接的。 以下是直接來自文檔的更多信息： https : //reactjs.org/docs/forms.html

這是一個小例子，我將為您解釋：

      // You need to add a onSubmit event to the form. This will trigger when you submit the for as you do any other html form (including pressing the submit button)
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          // need to save input value somewhere (use the state for this, check the link from above
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        // this is your button, as with other html forms.
        <input type="submit" value="Submit" />
      </form>

在您描述的情況下，您不應該真正提交按鈕內的數據（為什么要這樣做？），而是提交輸入內的表單數據。 如果你真的想要兩個提交按鈕（盡管可以通過按enter鍵提交表單），你可以這樣做：

    // onSubmit is the same as before, handle form data here
    <form className="App" onSubmit={onSubmit}>
      // setSubmitButton would set the submit button to button1 (e.g. use react state for this)
      <button type="submit" onClick={setSubmitButton('button1')} name="btn" value="wow">
        Button 1
      </button>
      <button type="submit" onClick={setSubmitButton('button2')} name="btn" value="oh no">
        Button 2
      </button>
    </form>

Answer 5

據我從評論中了解到，您希望有 2 個提交按鈕：一個用於“另存為草稿”，另一個用於“提交”。

我有這個解決方案。

在數據庫中為您的帖子制作一個布爾字段“完成”。 如果“finished”為“false”，則為草稿，如果為“true”，則為提交。

在前端設置組件狀態中使用 React 功能組件：

 const [finished, setFinished] = useState(false);

然后你有一個帶有“submitHandler”的表單，將它保存到數據庫和 2 個將“完成”設置為 true 或 false 的提交按鈕

 <form onSubmit={submitHandler}>
       //your other fields
       <button type="submit" onClick={() => setFinished(false)}">
         Save as a Draft
       </button>
       <button type="submit" onClick={() => setFinished(true)}>
         Submit
       </button>
    </form>