如何在react.js表單中創建多個提交按鈕？

Question

我正在嘗試在react.js中創建一個表單，用戶可以單擊兩個不同的按鈕來執行兩個不同的操作。 在我的情況下，表單應該允許用戶選擇一個文檔，並替換當前文檔（第一個按鈕）或附加到它（第二個按鈕）。 是否有可能以單一形式實現這一目標？

我以為我可以使用onSubmit函數中的'event'參數來檢測應用了哪個按鈕，但是沒有成功。 我還考慮過使用對輸入和普通按鈕的引用來重新創建偽形式，但如果存在更清晰的解決方案，我寧願不使用這樣的黑客。

預先感謝您的幫助！

注意：我發現了一些與多個提交按鈕相關的問題（例如這里和這里 ），但它們都沒有處理react.js解決方案。

Answer 1

試試這個。 它將使用“handleSubmit”函數處理常規提交（通過按鈕或按Enter鍵），並使用“handleAlternate”替代提交（通過其他按鈕）。

class Example extends React.Component {

  handleSubmit(event) {
    event.preventDefault();
    ....
  }

  handleAlternate(event) {
    event.preventDefault();
    ...
  }

  render() {
    <form onSubmit={this.handleSubmit.bind(this)}>
      ...
      <button type="submit">Submit</button>
      <button onClick={this.handleAlternate.bind(this)}>Alternate</button>
    </form>
  }

}

Answer 2

在我看來，你不應該使用onSubmit事件。 創建onSubmit以處理通過POST請求將表單發送到服務器，但您的用例似乎有所不同。

我會使用<button>元素和onClick處理程序。