React에서 사용자 지정 가능한 다단계 양식 설정

w3collective / react-multi-step-form

React에서 사용자 정의 가능한 다단계 양식

이 튜토리얼에서는 React에서 다단계 양식(마법사 양식이라고도 함) 구성 요소를 설정합니다. 큰 양식을 여러 단계로 나누면 사용자가 완료하기가 덜 어렵습니다. React는 구성 요소 기반이므로 개별 구성 요소에 각 단계를 포함하여 이를 달성할 수 있습니다.

먼저 Create React App을 사용하여 새 프로젝트를 설정해 보겠습니다.

npx create-react-app multi-step-form

다음으로 다음 파일을 사용하여 src 디렉터리에 구성 요소 폴더를 만듭니다.

MultiStep1.js
MultiStep2.js
MultiStep3.js
MultiStepForm.js
MultiStepSubmit.js

MultiStepForm.js에서 모두 함께 가져오기 전에 각 단계를 코딩합니다.

MultiStep1.js

양식의 첫 번째 단계에서는 이름과 이메일을 캡처합니다.

import React from "react";
const Step1 = (props) => {
  const { data, handleChange, next } = props;
  return (
    <form>
      <p>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          name="name"
          value={data.name}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          name="email"
          value={data.email}
          onChange={handleChange}
        />
      </p>
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step1;

데이터 소품의 필드에 입력된 값을 저장하고, handleChange는 저장된 값을 업데이트하고 다음으로 양식의 다음 단계를 로드합니다. 이들 각각에 대한 기능은 나중에 MultiStepForm.js에서 제공됩니다.

MultiStep2.js

두 번째 단계는 일부 위치 데이터를 캡처합니다.

import React from "react";
const Step2 = (props) => {
  const { data, handleChange, next, back } = props;
  return (
    <form>
      <p>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          name="street"
          value={data.street}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="city">City:</label>
        <input
          type="text"
          name="city"
          value={data.city}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="postcode">Postcode:</label>
        <input
          type="number"
          name="postcode"
          value={data.postcode}
          onChange={handleChange}
        />
      </p>
      <button onClick={back}>Back</button> 
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step2;

이것은 뒤로 버튼이 포함된 것을 제외하고 첫 번째 단계와 동일합니다.

MultiStep3.js

세 번째 단계는 주석을 캡처합니다.

import React from "react";
const Step3 = (props) => {
  const { data, handleChange, next, back } = props;
  return (
    <form>
      <p>
        <label htmlFor="comments">Comments:</label>
        <textarea
          name="comments"
          value={data.comments}
          onChange={handleChange}
        ></textarea>
      </p>      
      <button onClick={back}>Back</button> 
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step3;

MultiStepSubmit.js

각 단계가 완료되면 캡처된 데이터가 표시됩니다.

import React from "react";
const Submit = (props) => {
  const { data } = props;
  const listItems = Object.entries(data).map(([key, value])=>(
    <li>
      <strong>{key}:</strong> {value}
    </li>
  ));
  return (
    <div>
      <ul>{listItems}</ul>
      <button type="submit">Submit</button>
    </div>
  );
};
export default Submit;

이것은 단순히 data를 반복하고 키와 값을 정렬되지 않은 목록으로 출력합니다. 우리는 이 튜토리얼에서 제출 기능을 만들지 않을 것입니다. 이것에 대해 갈 수 있는 많은 방법이 있습니다. Node.js를 사용하여 이메일을 통해 이 데이터를 보내는 방법에 대한 예를 보려면 this tutorial을 확인하십시오.

다단계 Form.js

이제 MultiStepForm 구성 요소에서 모두 함께 가져올 수 있습니다.

import React, { useState } from "react";
import Step1 from "./MultiStep1";
import Step2 from "./MultiStep2";
import Step3 from "./MultiStep3";
import Submit from "./MultiStepSubmit";

const MultiStepForm = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    street: "",
    city: "",
    postcode: "",
    comments: "",    
  });
  const handleChange = (event) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
  };
  const next = () => {
    setCurrentStep(currentStep + 1);
  };
  const back = () => {
    setCurrentStep(currentStep - 1);
  };
  switch (currentStep) {
    case 1:
      return (
        <Step1 
          data={formData} 
          handleChange={handleChange} 
          next={next} 
        />
      );
    case 2:
      return (
        <Step2
          data={formData}
          handleChange={handleChange}
          next={next}
          back={back}
        />
      );
    case 3:
      return (
        <Step3
          data={formData}
          handleChange={handleChange}
          next={next}
          back={back}
        />
      );
    default:
      return <Submit data={formData} back={back} />;
  }
};
export default MultiStepForm;

보시다시피 다단계 기능은 switch가 무엇인지 확인한 다음 해당 단계의 구성 요소를 렌더링하는 currentStep 문에 의해 처리됩니다.

추가 필드를 수정하거나 추가하려면 새 필드로 인라인formData의 키를 업데이트해야 합니다. 새 구성 요소를 가져와 switch 문에 추가하여 추가 단계를 만들 수 있습니다.

남은 작업은 다음과 같이 App.js를 수정하여 구성 요소를 앱에 로드하는 것입니다.

import MultiStepForm from "./components/MultiStepForm";
import "./App.css";
const App = () => {
  return <MultiStepForm />;
};
export default App;

필요에 맞게 수정할 수 있는 다단계 양식이 있습니다. 이 튜토리얼이 마음에 드셨다면 건물에 대한 다른 튜토리얼custom React components을 확인해 보십시오.