Отправка данных форм в React

Question

У меня есть компоненты, в каждом из которых у меня есть одна форма при нажатии кнопки «Далее», я открываю новую форму (вызывая новый компонент), и когда она последняя, ​​я меняю ее для отправки. Я хочу достичь

1: при каждом следующем и обратном щелчке я хочу подтвердить свою форму с помощью response-form-hook

2: при щелчке на отправке я должен увидеть все данные

3: при нажатии на кнопку рядом с предыдущей данные не должны теряться из входов

Проблема

Итак, для проверки я использую response-hook-form , так как его очень просто использовать, но здесь я не могу узнать, поскольку мои кнопки не находятся внутри форм, которые они находятся в основном компоненте, поэтому как я буду проверять и отправлять форму на отправить нажмите со всеми данными.

Мой код

import React, { useState } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";

function AddCompanyMain() {
  const [currState, setCurrState] = useState(1);
  const [allState, setAllstate] = useState(3);

  const moveToPrevious = () => {
    setCurrState(currState - 1);
  };
  const moveToNext = () => {
    setCurrState(currState + 1);
  };

  return (
    <div>
      <div class="progress">
        <div>{currState}</div>
      </div>

      {currState === 1 && <Form1 />}
      {currState === 2 && <Form2 />}
      {currState === 3 && <Form3 />}

      {currState !== 1 && (
        <button
          className="btn btn-primary"
          type="button"
          onClick={moveToPrevious}
        >
          back
        </button>
      )}
      {currState !== allState && (
        <button className="btn btn-primary" type="button" onClick={moveToNext}>
          next
        </button>
      )}

      {currState === 3 && (
        <button className="btn btn-primary" type="submit">
          Submit
        </button>
      )}
    </div>
  );
}

export default AddCompanyMain;

Мой полный код Песочница кода

Я просто ищу для хорошего подхода, потому что здесь я не могу поместить отправку в каждый компонент, потому что я должен показывать шаги вверху.

Answer 1

Вы можете решить вашу проблему, выполнив следующие действия:

• В приложении js сохраните формы в массиве объектов и визуализируйте их на основе шага (состояние currentFrom).
• Вызов useForm в родительском компоненте (не в дочернем компоненте Form) и передача значений register, errors, defaultValues в качестве свойств вашим Form компонентам.
• В вашем Form компоненты, вам нужно получить register, etc как реквизит
• Поддерживать defaultValues в состоянии и обновлять их в onClick следующего / предыдущего. Вам нужно getValues ​​, а затем использовать setValues ​​, чтобы установить состояние (defaultValues)

Также:

• Чтобы активировать проверку при следующем / предыдущем нажатии кнопки, вам необходимо использовать triggerValidation

• Чтобы сохранить значения при нажатии кнопки «Далее» / previous, вам необходимо использовать defaultValues ​​ prop

См. рабочую демонстрацию здесь

Фрагмент кода

import React, { useState } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";
import { useForm } from "react-hook-form";

function AddCompanyMain() {
  const {
    register,
    triggerValidation,
    errors,
    setValue,
    getValues
  } = useForm();
  const [defaultValues, setDefaultValues] = useState({});

  const forms = [
    {
      fields: ["uname"],
      component: (register, errors, defaultValues) => (
        <Form1
          register={register}
          errors={errors}
          defaultValues={defaultValues}
        />
      )
    },
    {
      fields: ["lname"],
      component: (register, errors, defaultValues) => (
        <Form2
          register={register}
          errors={errors}
          defaultValues={defaultValues}
        />
      )
    },
    {
      fields: ["company"],
      component: (register, errors, defaultValues) => (
        <Form3
          register={register}
          errors={errors}
          defaultValues={defaultValues}
        />
      )
    }
  ];

  const [currentForm, setCurrentForm] = useState(0);

  const moveToPrevious = () => {
    setDefaultValues(prev => ({ ...prev, [currentForm]: getValues() }));

    triggerValidation(forms[currentForm].fields).then(valid => {
      if (valid) setCurrentForm(currentForm - 1);
    });
  };

  const moveToNext = () => {
    console.log(getValues());
    setDefaultValues(prev => ({ ...prev, [currentForm]: getValues() }));
    triggerValidation(forms[currentForm].fields).then(valid => {
      if (valid) setCurrentForm(currentForm + 1);
    });
  };

  const prevButton = currentForm !== 0;
  const nextButton = currentForm !== forms.length - 1;

  return (
    <div>
      <div class="progress">
        <div>{currentForm}</div>
      </div>

      {forms[currentForm].component(
        register,
        errors,
        defaultValues[currentForm]
      )}

      {prevButton && (
        <button
          className="btn btn-primary"
          type="button"
          onClick={moveToPrevious}
        >
          back
        </button>
      )}
      {nextButton && (
        <button className="btn btn-primary" type="button" onClick={moveToNext}>
          next
        </button>
      )}

      {currentForm === 3 && (
        <button className="btn btn-primary" type="submit">
          Submit
        </button>
      )}
    </div>
  );
}

export default AddCompanyMain;

Примечание. Как правило, при работе с многошаговыми формами лучше использовать управляемые компоненты и поддерживать состояния в родительском компоненте

Answer 2

Вы можете поднять состояние значения каждого компонента до родительского , а затем передать каждому свойству onChange для обновления состояния каждого дочернего компонента. Я не уверен, как это будет работать с формой react-hooks-form, но обычно именно так вы хотите синхронизировать состояния дочерних компонентов.

import React from "react";
import "./styles.css";

const FormOne = ({ value, onChange }) => (
  <div>
    Form 1
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>

)

const FormTwo = ({ value, onChange }) => (
  <div>
    Form 2
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>
)

const FormThree = ({ value, onChange }) => (
  <div>
    Form 3
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>
)

export default function App() {
  const [formOne, setFormOne] = React.useState('')
  const [formTwo, setFormTwo] = React.useState('')
  const [formThree, setFormThree] = React.useState('')
  const [index, setIndex] = React.useState(0)

  const moveUp = (e) => {
    e.preventDefault()

    if (index !== 2) {
      setIndex(index => index += 1)
    }
  }

  const moveDown = (e) => {
    e.preventDefault()

    if (index !== 0) {
      setIndex(index => index -= 1)
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault()

    console.log(formOne, formTwo, formThree)
  }

  const form = index === 0
    ? <FormOne value={formOne} onChange={setFormOne} />
    : index === 1
    ? <FormTwo value={formTwo} onChange={setFormTwo} />
    : <FormThree value={formThree} onChange={setFormThree} />

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        {form}
        {index !== 0 && <button onClick={moveDown}>Back</button>}
        {index !== 2
          ? <button onClick={moveUp}>Next</button>
          : <button type='submit'>Submit</button>
        }
      </form>
    </div>
  );
}