反应：在提交时获取按钮的形式答案

【问题标题】：React: get formaction of button on submit反应：在提交时获取按钮的形式
【发布时间】：2021-01-01 20:49:06
【问题描述】：

我正在尝试在 React 中处理提交表单。该表单有两个按钮，通常使用formaction 将表单发送到两个不同的位置。如何在 React 的 onSubmit 函数中获取表单提交按钮的 formaction？

onSubmit = (e) => {
    e.preventDefault();   
    if (formaction === 'download') {
        ...
    } else if (formaction === 'stop') {
        ...
    }
}

render() {
    return (
        <Form onSubmit={this.onSubmit}>
            ...
            <Button formAction="download" type="submit">Download</Button>
            <Button formAction="stop" type="submit">Stop</Button>
        </Form>
    );
)

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以将 onSubmit 方法传递给按钮而不是表单。并将您的名称属性连接到您喜欢的formAction。这样，您就可以在onSubmit 方法中访问e.target.name 中的formAction。

 onSubmit = (e) => {
    e.preventDefault();   
    const formAction = e.target.name
    if (formaction === 'download') {
    } else if (formaction === 'stop') {
    }
}

render() {
    return (
        <form>
            <button name="download" type="submit" onClick={this.onSubmit}>Download</button>
            <button name="stop" type="submit" onClick={this.onSubmit}>Stop</button>
        </form>
    );
  }

【讨论】：

这应该是错误的，因为表单未提交，因此其他输入无法访问。如果我错了，请纠正我
您已将onClick 处理程序分配给submit 按钮。表单没有提交怎么办？
如果表单中有其他输入，那么它们将无法在 onSubmit 函数中访问，并且代码中也没有使用状态变量。
你在说什么其他输入？为什么其他输入需要onSubmit 函数？能举个例子吗？

【解决方案2】：

好的，让我们分解一下。您正在尝试结合使用 formAction 属性和 onSubmit 函数。

FormAction 属性基本上用于覆盖表单的默认action 属性。它定义了在按下 submit 类型的特定 button 时要点击的 URL。因此，formAction 的值应该是一个 URL。看这里

https://www.w3schools.com/tags/att_form_action.asp

再次来到 onSubmit 功能。 onSubmit 函数的事件目标是 form 元素，因此您现在无法获得实际点击按钮的任何属性。

要解决此问题，您可以将 onSubmit 函数移至单个按钮并手动处理服务器调用。

或者，您可以有两个不同的按钮 URL 并处理服务器上的逻辑。

另外，我建议在提交表单时阅读事件顺序。

https://stackoverflow.com/a/29015329/2477472

【讨论】：