是否可以使用按钮单击事件来触发 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()来禁用此默认行为。

Answer 2

是的！ 你可以用简单的 HTML 类似的方式来做 React。

https://reactjs.org/docs/forms.html

class NameForm extends React.Component {
  constructor(props) {
  super(props);
  this.state = {value: ''};

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }

handleChange(event) {
  this.setState({value: event.target.value});
}

handleSubmit(event) {
  alert('A name was submitted: ' + this.state.value);
  event.preventDefault();
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
      <input type="submit" value="Submit" />
    </form>
  );
}}

这样< input type="submit" value="Submit" />将是您的提交按钮，您只需将 handleSubmit 函数传递给表单标签， < form onSubmit={this.handleSubmit}>

Answer 3

你可以在 vanilla HTML 中做到这一点，它应该在 React 中工作。 点击按钮应该会自动触发表单提交事件

<button type="submit">...</button>