Get value of submit button in `onSubmit` eventhandler in React-CodePudding

Normally, when I have a form, I would react to the onSubmit handler

<form onSubmit={e => { ... } }>
   <input ... />
   <input ... />
   <button type="submit">Save</button>
</form>

This pattern also plays well with e.g. formik, that has an onSubmit event handler - and if I place a <button type="submit"> in the form, the formik event handler will be triggered.

However, I am now in a situtation where one of two things should happen, and the UI right now is to have two different submit buttons. (Is this a bad pattern?)

My thought was to put a value on the button, but I cannot figure out how to read the value from the event handler

<form onSubmit={e => {
       // how do I figure out which button was pressed
       const type = e. ???
    }}>
    <input ... />
    <input ... />
    <button type="submit" name="type" value="DO_THIS">Do This!</button>
    <button type="submit" name="type" value="DO_THAT">Do That!</button>
</form>

My solution right now is to have individual onClick handlers on the buttons, which works - but it annoys me.

CodePudding user response：

Using 2 submit in the same form is a bad practice. Please avoid that.

You can have one type=submit and other buttons type=button.

<button type="submit" name="do_this" value="DO_THIS">Do This!</button>
<button type="button" name="do_that" value="DO_THAT" onClick="thatHandler()">Do That!</button>

for DO_THIS button you can continue using form submit handler as you have now.

for DO_THAT button you can have onClick with thatHandle function.

thatHandler() {
 // Your code goes here.
}

CodePudding user response：

handleInput(el) {
 console.log(el.target.value);
}

<button type="submit" name="type" value="DO_THIS" onClick={this.handleInput} >Do This!</button>

CodePudding user response：

You can try giving name and type to a button and catch it using window.event.submitter.name.

` DO THIS

<button type="submit" name="DO_THAT">DO THAT</button> 

<form onSubmit={handleSubmit} > ...
const handleSubmit = () => { 
const buttonType=window.event.submitter.name; 

if(buttonType==="DO_THAT"){
//HANDLE DO_THAT FUNCTION
return;
}

if(buttonType==="DO_THIS"){
 //HANDLE DO_THIS FUNC
return;
}

}

CodePudding user response：

From my understanding, in the react framework we should use an object to store the form data, and then use the onchange event handler to update the object field value. So, I give you an example for your reference.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [data, updateData] = useState({ field1: null, field2: null });
  let updateF1 = (e) => {
    let temp={...data}
    temp.field1=e.target.value;
    updateData(temp)
  };
  let updateF2 = (v) => {
    let temp={...data}
    temp.field2=v;
    updateData(temp);
  };
  return (
    <div>
      <form>
        <input type="text" name="field1" onChange={updateF1} />
        <input type="button" onClick={() => updateF2("DO_THIS")} value="Do This!" />
        <input type="button" onClick={() => updateF2("DO_THAT")} value="Do That!" />
      </form>
      <div>
        {JSON.stringify(data)}
      </div>
    </div>
  );
}