在React中的"onSubmit"事件处理程序中获取提交按钮的值

Question

通常，当我有一个表单时，我会对onSubmit处理程序做出反应

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

这个模式也适用于例如formik，它有一个onSubmit事件处理程序，如果我在表单中放置一个<button type="submit">，formik事件处理程序就会被触发。

然而，我现在的处境是，应该发生两件事中的一件，而现在的UI是有两个不同的提交按钮。(这是一个坏模式吗？(

我的想法是在按钮上加一个值，但我不知道如何从事件处理程序中读取值

<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>

我现在的解决方案是在按钮上设置单独的onClick处理程序，这很有效，但这让我很恼火

Answer 1

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

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

Answer 2

您可以尝试为按钮指定名称和类型，并使用window.event.submitter.name.捕获它

`做这个

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

`

Answer 3

根据我的理解，在react框架中，我们应该使用对象来存储表单数据，然后使用onchange事件处理程序来更新对象字段值。所以，我给你举一个例子供你参考。

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

Answer 4

在同一表单中使用2个提交是一种糟糕的做法。请避免这种情况。

您可以有一个type=submit和其他按钮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>

对于DO_THIS按钮，您可以像现在一样继续使用表单提交处理程序。

对于DO_THAT按钮，您可以使用onClick的Handle函数。

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