React에서 여러 단계 양식을 작성하려면 어떻게 합니까?

sametweb / 반응 단계 생성기

React 단계 생성기를 사용하면 한 위치에서 여러 구성 요소의 상태를 조합하고 다른 구성 요소의 상태를 잃지 않고 단계 구성 요소 사이를 탐색할 수 있습니다.

This guide is using React Step Builder v2.0.11. If you are using the version v3+, please see the latest documentation on package's NPM page.

다단계 등록표를 만드는 것은 내가 얼마 전에 직면한 도전이다. 이것은 내가 react-step-builder 가방을 만드는 영감을 불러일으켰다.본고에서, 나는 이 소프트웨어 패키지를 사용하여 다단계 폼을 만드는 방법을 신속하게 보여 줄 것이다.
이 패키지의 작용을 간단하게 설명해 드리겠습니다.

그것은 두 개의 포장기 구성 요소를 제공했다: Steps 과 Step.Steps는 Step 구성 요소의 패키지 구성 요소로 단계 구성 요소를 받아들여 하나의 위치에 상태를 조합하고 이전에 수집한 데이터를 잃어버리지 않고 이동하는 보조 방법을 제공합니다.
프레젠테이션부터 시작하겠습니다. 소프트웨어 패키지가 해결해야 할 문제를 더욱 쉽게 이해할 수 있을 것이라고 믿습니다.

For detailed explanations, please refer to the documentation.

1. 새 프로젝트 작성 및 패키지 설치

$ npx create-react-app rsb-demo

$ npm install react-step-builder

2. step 구성 요소 준비

간단하게 보기 위해서, 나는 여기에 세 개의 예시 구성 요소를 제공할 것이다.첫 번째와 두 번째 구성 요소에서, 우리는 사용자에게 정보를 제공하고, 세 번째 단계에서 화면에 이러한 정보를 보여 달라고 요구할 것이다.물론 실제 응용 프로그램에서 이 데이터를 특정한 API에 제출하기를 원할 수도 있습니다.또한 원하는 만큼/큰 걸음으로 움직일 수 있습니다.
이 때, step 구성 요소는 아무런 기능도 없습니다.잠시 후, 우리는 폼 처리 프로그램을 만드는 등 걱정하지 않고 제공하는 방법을 사용하여 그들의 능력을 강화할 것이다.

// Step1.js
import React from "react";

function Step1(props) {
  return (
    <div>
      <p>Name: <input name="name" /></p>
      <p>Surname: <input name="surname" /></p>
    </div>
  );
}

export default Step1;

// Step2.js
import React from "react";

function Step2(props) {
  return (
    <div>
      <p>Email: <input name="email" /></p>
      <p>Phone: <input name="Phone" /></p>
    </div>
  );
}

export default Step2;

// FinalStep.js
import React from "react";

function FinalStep(props) {
  return (
    <div>
      <p>Name:</p>
      <p>Surname:</p> 
      <p>Email:</p>
      <p>Phone:</p>
    </div>
  );
}

export default FinalStep;

3. 당신의 다단계 폼을 구축합니다

App.js 파일에서 패키지 구성 요소를 가져오고 새로 만든 step 구성 요소를 전송합니다.

// App.js
import React from "react";

import { Steps, Step } from "react-step-builder";
import Step1 from "./Step1";
import Step2 from "./Step2";
import FinalStep from "./FinalStep";

function App() {
  return (
    <div className="App">
      <Steps>
        <Step component={Step1} />
        <Step component={Step2} />
        <Step component={FinalStep} />
      </Steps>
    </div>
  );
}

export default App;

이 때, step 구성 요소는 props에서 조수 방법과 속성을 수신합니다.우리는 그것들을 이용하여 우리의 다단계 표에 몇 가지 기능을 제공할 것이다.

4. 양식 요소를 글로벌 상태로 연결

Step1 구성 요소로 돌아가서 폼 요소를 업데이트하고 value 속성의 상태 값과 onChange 이벤트를 처리하는 방법을 제공합니다.
이러한 입력을 만들 때 <input name="foo" /> 요소의 값은 foo 키를 사용하여 글로벌 상태로 저장됩니다.따라서 모든 폼 요소에 유일한 이름을 지정해야 합니다.이것이 바로 우리가 value 요소에서 input 속성에 제공할 내용이다.
이제 글로벌 상태에 액세스하고 요소input를 업데이트합니다.

<input name="name" value={props.getState('name', '')} /></p>
<input name="surname" value={props.getState('surname', '')} /></p>

만약에 저희의 getState 방법은 두 가지 파라미터를 사용합니다. 첫 번째는 요소의 이름을 입력하는 것이고, 두 번째는 기본값을 입력하는 것입니다.콘솔에서 React의 "통제되지 않음/제어되지 않는 구성 요소"경고를 받지 않도록 빈 문자열을 전달합니다.
이제 Step2 및 FinalStep 구성 요소에서 동일한 변경 사항을 반복합니다.

// Step2.js
<input name="email" value={props.getState('email', '')} /></p>
<input name="phone" value={props.getState('phone', '')} /></p>

FinalStep 구성 요소에 폼 요소가 없습니다. 사용자가 이전에 입력한 상태 데이터에 접근할 뿐입니다.

// FinalStep.js
<p>Name: {props.state.name}</p>
<p>Surname: {props.state.surname}</p>
<p>Email: {props.state.email}</p>
<p>Phone: {props.state.phone}</p>

이 점에서"왜 우리는 앞에서 props.getState('name', '') 방법으로 상태에 접근하고, 마지막 방법에서 props.state.name 로 상태에 접근하느냐고 물어볼 수도 있습니다. 답은 간단합니다. this.props.name 사용자가 필드에 입력하기 시작할 때까지입니다. 그러나 undefined 빈 문자열을 되돌려줍니다. (우리가 전달한 두 번째 인자 덕분입니다.)사용자가 입력에 입력한 내용이 없더라도이렇게 하면 폼 요소가 기본값 props.getState('name', '') 을 빈 문자열로 사용하면 React의 value 오류가 발생하지 않습니다.
이제 controlled/uncontrolled component 프로세서를 추가할 때가 되었습니다. 그러면 저희 폼은 사용자 입력을 전역 상태로 저장할 수 있습니다.
단계 구성 요소를 업데이트하고 onChange 이벤트를 처리하는 방법을 제공합니다.

<input name="name" value={props.getState('name', '')} onChange={props.handleChange} /></p>
<input name="surname" value={props.getState('surname', '')} onChange={props.handleChange} /></p>

우리는 모든 표 요소에 대해 onChange 를 만들었다.올바른 글로벌 상태 키를 사용하여 양식 값을 저장해야 합니다.

NOTE: You may also manipulate your global state with props.setState(key, value) method. It can be used for cases where synthetic React events (e.g. onChange) are not available. For example, clicking on an image or text and updating the state with the onClick method.

우리의 절차는 지금 준비가 다 되었다.우리가 사방을 둘러볼 수 있도록 이전과 다음 단추를 연구해 봅시다.

5. 이전 및 다음 기능 활용

각 단계마다 onChange={props.handleChange} 및 props.next() 방법이 단계 사이를 이동합니다.나는 첫 번째 직감에 따라 props.prev() 사건에서 이 방법을 받아들일 다음 단추와 이전 단추를 만들 것이다.

<button onClick={props.prev}>Previous</button>
<button onClick={props.next}>Next</button>

이 단추를 각 단계 구성 요소에 단독으로 추가하거나 유지보수성을 높이기 위해 onClick 구성 요소를 만들 수 있습니다.나는 본문 뒤에 Navigation 구성 요소를 설명할 것이다.
이제 마지막 단계로 각 단계의 내장 방법을 이야기합시다.

6. 내비게이션 버튼 비활성화 / 조건부 표시

첫 번째 구성 요소에 이전 단추를 표시하지 않거나 마지막 구성 요소에 다음 단추를 표시하지 않으려면 첫 번째/마지막 단계에서 이전/다음 단추가 없기 때문에 갑자기 머릿속에 나타날 수 있습니다.아래에 언급한 보조 방법은 이 문제를 해결하는 데 매우 실용적이다.

// From the documentation
props.step.isFirst() - Returns true if it's the first step, otherwise false
props.step.isLast() - Returns true if it's the last step, otherwise false
props.step.hasNext() - Returns true if there is a next step available, otherwise false
props.step.hasPrev() - Returns true if there is a previous step available, otherwise false

비활성화 방법을 사용하려면 다음과 같이 하십시오.

<button disabled={props.step.isFirst()} onClick={props.prev}>Previous</button>
<button disabled={props.step.isLast()} onClick={props.next}>Next</button>

이것은 조건 렌더링 방법입니다.

{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
{props.step.hasNext() && <button onClick={props.next}>Next</button>}

이제 Navigation 객체를 사용하여 각 단계에서 렌더링할 글로벌 Navigation 구성 요소를 추가합니다.
다음과 같이 config 어셈블리를 생성합니다.

const Navigation = (props) => {
  return (
    <div>
    <button onClick={props.prev}>Previous</button>
    <button onClick={props.next}>Next</button>
    </div>
  );
};

이제 Navigation 대상을 만듭니다.

const config = {
  navigation: {
    component: Navigation,
    location: "before", // or after
  }
};

마지막으로 이 대상을 config 구성 요소에 전달합시다.

<Steps config={config}>
  // your Step components
</Steps>

업데이트 v.2.0.7
구성 객체에 추가 Steps 또는 before 속성을 전달할 수 있습니다.이 속성들은 after 구성 요소와 같은 구성 요소를 받아들인다.말 그대로 Navigation/before 속성에 전달된 구성 요소는 단계 구성 요소 이전/이후에 렌더링됩니다.
주의: 자신의 도구를 step 구성 요소에 전달하려면 after 구성 요소에 직접 전달하면 됩니다.step 구성 요소는 자동으로 이 도구를 수신합니다.

Here is the final result:

다음은 codesandbox의 작업 예입니다.
각 방법과 사용에 대한 자세한 내용은 문서를 참조하십시오.