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

Question

React中是否可以使用常规按钮组件的“click”事件来触发隐藏表单提交按钮的单击/提交表单，并保持所有表单值和更新索引的完整性？

我有一个应用程序，其中包含一系列步骤（类似于向导）和每个步骤中都有自己的隐藏提交按钮的表单。当单击“ButtonNext”（最后一步上的“ButtonFinal”）时，是否有一种方法可以触发隐藏表单提交按钮的单击，以便运行“onSubmit”并将表单值和索引值发送到“handleSubmit”函数？

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

编辑：在DOM中，“ButtonNext”和“ButtonFinal”是表单的直接同级，并且无法添加到表单中。

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

- ForDevTasks

Answer 1

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

- bwasilewski

---

你好。这种方法唯一的问题是我无法将子组件添加到表单组件中。ButtonNext和ButtonFinal存在于表单的同级位置。 - ForDevTasks

Answer 2

是的！你可以用 React 以类似纯 HTML 的方式实现这个。

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

- Luís Guilherme Pelin Martins

---

你好。这种方法唯一的问题是我无法将子组件添加到表单组件中。ButtonNext和ButtonFinal存在于表单的同级位置。 - ForDevTasks

Answer 3

您可以使用纯HTML完成此操作，这应该在React中起作用。点击按钮应自动触发表单提交事件。

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

- Bill Metcalf