是否可以使用按钮单击事件来触发 React 中的表单提交？

Question

是否可以在 React 中使用常规按钮组件上的单击事件来触发隐藏表单提交按钮的单击/表单的提交，并且所有表单值和更新的索引都完好无损？

我有一个包含一系列步骤（如向导）的应用程序和每个步骤中都有自己隐藏提交按钮的表单。当ButtonNext（以及ButtonFinal最后一步）被点击时，有没有办法触发对隐藏表单提交按钮的点击，以便onSubmit运行并将表单值和索引值发送到handleSubmit函数？

我可能可以使用data-key属性访问隐藏的提交按钮。

编辑：ButtonNext并且ButtonFinal是 DOM 中表单的直接兄弟，不能添加到表单中。

import React, { useState } from 'react'
import { Row, Col } from 'react-styled-flexboxgrid'
import { Form, ButtonNext, ButtonPrevious, ButtonFinal } from './style'

const Application = ({ steps }) => {
  const [currentStepNum, setCurrentStepNum] = useState(0)
  const [previousStepName, setPreviousStepName] = useState(steps[0].step_name)
  const [nextStepName, setNextStepName] = useState(steps[1].step_name)
  const [formValues, setFormValues] = useState(null)

  const handleSubmit = (values, step) => {
    setFormValues(values)
    setStep(step)
  }

  const handleClick = (event, step) => {
    event.preventDefault()
    setStep(step)
  }

  const setStep = step => {
    step = parseInt(step)
    setCurrentStepNum(step)

    if (step > 0) {
      setPreviousStepName(steps[step - 1].step_name)
    }

    if (step < steps.length - 1) {
      setNextStepName(steps[step + 1].step_name)
    }
  }

  return (
    <>
      <div>
        {steps.map((step, index) => {
          return (
            <div key={index}>
              {currentStepNum == index && (
                <>
                  {step.form.length > 0 && (
                    <Form
                      action="/"
                      fields={fields}
                      onSubmit={(values) => {
                        handleSubmit(values, [index + 1])
                      }}
                    />
                  )}
                  {index > 0 && (
                    <ButtonPrevious
                      onClick={event => {
                        handleClick(event, [index - 1])
                      }}
                    >
                      Back to {previousStepName}
                    </ButtonPrevious>
                  )}
                  {index < steps.length - 1 && (
                    <ButtonNext
                      onClick={Trigger onSubmit here}
                    >
                      Next: {nextStepName}
                    </ButtonNext>
                  )}
                  {index == steps.length - 1 && (
                    <ButtonFinal
                     onClick={Trigger onSubmit here}
                    >
                      FINAL SUBMIT BUTTON PLACEHOLDER
                    </ButtonFinal>
                  )}
                </>
              )}
            </div>
          )
        })}
      </div>
    </>
  )
}

export default Application

Answer 1

如果您有一个设置了 onSubmit 的表单元素，那么默认情况下该表单中的任何按钮都将提交该表单。您可以通过为该按钮定义一个 onClick 函数并调用preventDefault()传递的事件来禁用此默认行为。