Можно ли использовать событие нажатия кнопки для запуска отправки формы в React?

Question

Возможно ли в React использовать событие click для обычного компонента кнопки, чтобы инициировать щелчок скрытой кнопки отправки / отправки формы со всеми значениями формы и обновленным индексом без изменений?

I иметь приложение с последовательностью шагов (например, мастер) и форму на каждом шаге, которая имеет свою собственную скрытую кнопку отправки. Если щелкнуть 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

Да! Вы можете сделать это, реагируя так же, как и в случае с 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>
  );
}}

Таким образом значение будет вашим кнопку отправки, и вы просто передаете функцию handleSubmit тегу формы,

Answer 2

Если у вас есть элемент формы с установленным onSubmit, то любая кнопка в этой форме по умолчанию отправит форму. Вы можете отключить это поведение по умолчанию, определив функцию onClick для этой кнопки и вызвав preventDefault() для пропущенного события.

Answer 3

Вы можете сделать это в ванили HTML, которая должна работать в React. Нажатие на кнопку должно автоматически вызвать событие отправки формы

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