ReactとSemanticUIを使用してマルチステップフォームを作成する方法

投稿日: 2022-10-23 2022-10-23
タグ: javascript, React

序章

フォームは、Webアプリケーションでユーザー入力を収集するために使用されます。ただし、ユーザーから大量の情報を収集する必要があり、その結果、フィールドの数が膨大になる場合があります。

1つの解決策は、フォームを複数のセクション（またはステップ）に分割することです。各セクションは、各ポイントで特定のタイプの情報を収集します。

このチュートリアルでは、ReactとSemanticUIを使用してマルチステップ登録フォームを作成します。これは、セクションごとにReactコンポーネントを使用することで実現できます。次に、状態を操作して、各ステップでレンダリングするコンポーネントを選択できます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
このチュートリアルを開始する前に、Reactをよく理解しておくと役に立ちます。 React.js シリーズのコーディング方法に従って、Reactの詳細を学ぶことができます。

このチュートリアルは、Nodev14.0.0で検証されました。 npm v6.14.4、 react v16.13.1、 semantic-ui-react v0.88.2、および semantic-ui-css v2.4.1。

ステップ1—セマンティックUIを使用して新しいReactプロジェクトを初期化する

まず、 npx を使用して、create-react-appを使用してプロジェクトを生成します。

ターミナルで、次を実行します。

npx create-react-app multistep-form

これにより、開発環境が完全に構成されたサンプルReactアプリケーションが作成されます。

次に、新しく作成したプロジェクトディレクトリに移動します。

cd multistep-form

スタイリングには、UIフレームワーク SemanticUIを使用します。 ReactアプリケーションでSemanticUIを使用するには、 Semantic UIReactを使用します。 Semantic UI Reactは、開発プロセスをスピードアップするために使用できるビルド済みのコンポーネントを提供します。

また、レスポンシブWebデザインをサポートしているため、クロスプラットフォームのWebサイトを構築するのに最適です。

ターミナルで、次を実行します。

npm install semantic-ui-react@0.88.2

次に、デフォルトのテーマも含めます。

ターミナルで、次を実行します。

npm install semantic-ui-css@2.4.1

カスタムセマンティックUICSSを追加するには、 index.js ファイル：

nano src/index.js

そして、以下を追加します import:

src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'semantic-ui-css/semantic.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Reactプロジェクトが初期化され、必要な依存関係が追加されたので、コンポーネントの作成を開始できます。

ステップ2—コンポーネントの作成

このチュートリアルステップでは、5つのコンポーネントの作成を追加します。

MainForm.jsx
UserDetails.jsx
PersonalDetails.jsx
Confirmation.jsx
Success.jsx

まず、編集しましょう App.js コンポーネントをインポートしてレンダリングするには：

nano src/App.js

によって生成されたすべての定型コードを置き換えます create-react-app 次のコード行を使用します。

src / App.js

import React, { Component } from 'react';
import { Grid } from 'semantic-ui-react';
import './App.css';
import MainForm from './components/MainForm';

class App extends Component {
  render() {
    return (
      <Grid verticalAlign='middle' style={{ height: '100vh' }}>
        <MainForm />
      </Grid>
    );
  }
}

export default App;

注：ここで開発サーバーを起動すると、フォームのすべてのコンポーネントの書き込みとインポートが完了するまでエラーが発生します。

このコードでは、 Grid Semantic UI Reactのコンポーネントで、テキストを中央に配置し、パディングを追加することで見栄えを良くします。

また、インポートして使用しました MainForm 成分。今からそれに取り組みましょう。

の構築 `MainForm` 成分

設定する最初のコンポーネントは MainForm.jsx アプリケーションのほとんどの機能を担当するコンポーネント。

を作成しましょう components 下のフォルダ src ディレクトリ：

mkdir src/components

そして、 Mainform.jsx ファイル：

nano src/components/MainForm.jsx

次のコード行を追加します。

src / components / MainForm.jsx

import React, { Component } from 'react';
import UserDetails from './UserDetails';
import PersonalDetails from './PersonalDetails';
import Confirmation from './Confirmation';
import Success from './Success';

このコードは依存関係をインポートします。また、フォームの4つのセクションもインポートされます。 UserDetails, PersonalDetails, Confirmation、と Success. 次に、これらのコンポーネントを構築します。

次に、インポートの下に、の状態を追加します MainForm 成分：

src / components / MainForm.jsx

// ...

class MainForm extends Component {
  state = {
    step: 1,
    firstName: '',
    lastName: '',
    email: '',
    age: '',
    city: '',
    country: ''
  }
}

export default MainForm;

firstName, lastName, email, age, city、と country エンドユーザーが提供することに関心のある情報のフィールドです。

step からの番号になります 1 に 4. これにより、ユーザーが現在マルチステッププロセスのどのステップにあるかを追跡できます。

次に、 nextStep, prevStep、と handleChange 機能：

src / components / MainForm.jsx

// ...

class MainForm extends Component {
  // ...

  nextStep = () => {
    const { step } = this.state
    this.setState({
      step : step + 1
    })
  }

  prevStep = () => {
    const { step } = this.state
    this.setState({
      step : step - 1
    })
  }

  handleChange = input => event => {
    this.setState({[input]: event.target.value})
  }
}

// ...

コンポーネントは、ステップイン状態のデフォルト値で初期化されます。 1、フォームの最初のセクションがレンダリングされます。その後、ユーザーは、を使用してステップ間を前後にスキップできます。 prevStep と nextStep 機能。これらはの値を更新します step ユーザーがレンダリングされたコンポーネントを切り替えることができる状態にあります。

The handleChange 関数は、状態内のユーザーによって提供された詳細の値を更新します。 prevStep と nextStep 関数の場合、小道具として子コンポーネントに渡されます。これにより、子コンポーネント内で使用するために実装された機能を渡すことができます。

次に、 render 関数：

src / components / MainForm.jsx

// ...

class MainForm extends Component {
  // ...

  render() {
    const { step } = this.state;
    const { firstName, lastName, email, age, city, country } = this.state;
    const values = { firstName, lastName, email, age, city, country };

    switch(step) {
      case 1:
        return <UserDetails
                  nextStep={this.nextStep} 
                  handleChange = {this.handleChange}
                  values={values}
                />
      case 2:
        return <PersonalDetails
                  nextStep={this.nextStep}
                  prevStep={this.prevStep}
                  handleChange = {this.handleChange}
                  values={values}
                />
      case 3:
        return <Confirmation
                  nextStep={this.nextStep}
                  prevStep={this.prevStep}
                  values={values}
                />
      case 4:
        return <Success />
    }
  }
}

// ...

マルチステップフォームは、 switch ステートメントは、 step 状態から、これを使用して、各ステップでレンダリングされるコンポーネントを選択します。

ステップ1で、 UserDetails コンポーネントがレンダリングされます。 ステップ2で、 PersonalDetails コンポーネントがレンダリングされます。 ステップ3で、 Confirmation コンポーネントがレンダリングされます。そしてステップ4で、 Success コンポーネントがレンダリングされます。

君の MainForm これでコンポーネントが完成しました。

の構築 `UserDetails` 成分

それでは、フォームの最初のセクションを作成しましょう。

作成する UserDetails.jsx ファイル：

nano src/components/UserDetails.jsx

次のコード行を追加します。

src / components / UserDetails.jsx

import React, { Component } from 'react';
import { Grid, Header, Segment, Form, Button } from 'semantic-ui-react';

class UserDetails extends Component {
  saveAndContinue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  }

  render() {
    const { values } = this.props;

    return (
      <Grid.Column style={{ maxWidth: 450 }}>
        <Header textAlign='center'>
          <h1>Enter User Details</h1>
        </Header>

        <Form>
          <Segment>
            <Form.Field>
              <label>First Name</label>
              <input
                placeholder='First Name'
                onChange={this.props.handleChange('firstName')}
                defaultValue={values.firstName}
              />
            </Form.Field>

            <Form.Field>
              <label>Last Name</label>
              <input
                placeholder='Last Name'
                onChange={this.props.handleChange('lastName')}
                defaultValue={values.lastName}
              />
            </Form.Field>

            <Form.Field>
              <label>Email Address</label>
              <input
                type='email'
                placeholder='Email Address'
                onChange={this.props.handleChange('email')}
                defaultValue={values.email}
              />
            </Form.Field>
          </Segment>

          <Segment>
            <Button onClick={this.saveAndContinue}>Save And Continue</Button>
          </Segment>
        </Form>
      </Grid.Column>
    );
  }
}

export default UserDetails;

これにより、ユーザーの名、名前、および電子メールアドレスを収集するフォームが作成されます。

The saveAndContinue 関数は、詳細の入力が完了すると、ユーザーを次のコンポーネントにルーティングする役割を果たします。

あなたはあなたが電話したことに気付くでしょう nextStep 小道具としてコンポーネントに提供した機能。この関数が呼び出されるたびに、親コンポーネントの状態が更新されます（MainForm). あなたも handleChange 各入力要素で更新される各フィールドの名前を指定しました。

また、各入力フィールドに defaultValue の状態から選択します MainForm 成分。これにより、ユーザーが別のステップから1つのステップに戻る場合に、状態で更新された値を選択できます。

君の UserDetails これでコンポーネントが完成しました。

の構築 `PersonalDetails` 成分

次に、ユーザーの個人情報を収集する2番目のセクションを作成しましょう。

作成する PersonalDetails.jsx ファイル：

nano src/components/PersonalDetails.jsx

次のコード行を追加します。

src / components / PersonalDetails.jsx

import React, { Component } from 'react';
import { Grid, Header, Segment, Form, Button } from 'semantic-ui-react';

class PersonalDetails extends Component {
  saveAndContinue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  }

  back = (e) => {
    e.preventDefault();
    this.props.prevStep();
  }

  render() {
    const { values } = this.props;

    return (
      <Grid.Column style={{ maxWidth: 450 }}>
        <Header textAlign='center'>
          <h1>Enter Personal Details</h1>
        </Header>

        <Form>
          <Segment>
            <Form.Field>
              <label>Age</label>
              <input placeholder='Age'
                onChange={this.props.handleChange('age')}
                defaultValue={values.age}
              />
            </Form.Field>

            <Form.Field>
              <label>City</label>
              <input placeholder='City'
                onChange={this.props.handleChange('city')}
                defaultValue={values.city}
              />
            </Form.Field>

            <Form.Field>
              <label>Country</label>
              <input placeholder='Country'
                onChange={this.props.handleChange('country')}
                defaultValue={values.country}
              />
            </Form.Field>
          </Segment>

          <Segment textAlign='center'>
            <Button onClick={this.back}>Back</Button>

            <Button onClick={this.saveAndContinue}>Save And Continue</Button>
          </Segment>
        </Form>
      </Grid.Column>
    )
  }
}

export default PersonalDetails;

このセクションでは、ユーザーの年齢と場所を収集します。全体的な機能は、戻るボタンが追加されていることを除けば、ユーザーの詳細セクションと似ています。このボタンを押すと、ユーザーは前の手順に戻ります。 prevStep 小道具から。

あなたは back と saveAndContinue 各コンポーネントの関数は、 event(e) 引数として、あなたは event.preventDefault() これらの関数では、ユーザーが送信するたびにフォームが再読み込みされないようにします。これは、フォームのデフォルトの動作です。

君の PersonalDetails これでコンポーネントが完成しました。

の構築 `Confirmation` 成分

次に、フォームの最後のセクションを作成して、ユーザーがアプリケーションに入力した詳細が正しいことを確認します。

作成する Confirmation.jsx ファイル：

nano src/components/Confirmation.jsx

次のコード行を追加します。

src / components / Confirmation.jsx

import React, { Component } from 'react';
import { Grid, Header, Segment, Button, List } from 'semantic-ui-react';

class Confirmation extends Component {
  saveAndContinue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  }

  back = (e) => {
    e.preventDefault();
    this.props.prevStep();
  }

  render() {
    const { values: { firstName, lastName, email, age, city, country } } = this.props;

    return (
      <Grid.Column style={{ maxWidth: 450 }}>
        <Header textAlign='center'>
          <h1>Confirm your Details</h1>

          <p>Click Confirm if the following details have been correctly entered</p>
        </Header>

        <Segment>
          <List divided relaxed>
            <List.Item>
              <List.Icon name='users' size='large' />
              <List.Content>First Name: {firstName}</List.Content>
            </List.Item>

            <List.Item>
              <List.Icon name='users' size='large' />
              <List.Content>Last Name: {lastName}</List.Content>
            </List.Item>

            <List.Item>
              <List.Icon name='mail' size='large' />
              <List.Content>Email: {email}</List.Content>
            </List.Item>

            <List.Item>
              <List.Icon name='calendar' size='large' />
              <List.Content>Age: {age}</List.Content>
            </List.Item>

            <List.Item>
              <List.Icon name='marker' size='large' />
              <List.Content>Location: {city}, {country}</List.Content>
            </List.Item>
          </List>
        </Segment>

        <Segment textAlign='center'>
          <Button onClick={this.back}>Back</Button>

          <Button onClick={this.saveAndContinue}>Confirm</Button>
        </Segment>
      </Grid.Column>
    )
  }
}

export default Confirmation;

これにより、ユーザーが入力したすべての詳細を表示するセクションが作成され、送信する前に詳細を確認するように求められます。これは通常、データを送信して保存するためにバックエンドに対して最後のAPI呼び出しを行う場所です。

これはデモなので、 Confirm ボタンは同じを実装します saveAndContinue 以前のコンポーネントで使用した関数。ただし、実際のシナリオでは、最終的な送信を処理してデータを保存する別の送信関数を実装します。

君の Confirmation これでコンポーネントが完成しました。

の構築 `Success` 成分

プロジェクトの次の最後のコンポーネントは Success ユーザーが情報を正常に保存したときにレンダリングされるコンポーネント。

作成する Confirmation.jsx ファイル：

nano src/components/Success.jsx

次のコード行を追加します。

src / components / Success.jsx

import React, { Component } from 'react';
import { Grid, Header } from 'semantic-ui-react';

class Success extends Component {
  render() {
    return (
      <Grid.Column style={{ maxWidth: 450 }}>
        <Header textAlign='center'>
          <h1>Details Successfully Saved</h1>
        </Header>
      </Grid.Column>
    )
  }
}

export default Success;

これは表示されます 'Details Successfully Saved' ユーザーがフォームの最終ステップに到達したときのメッセージ。

マルチステップフォームのすべてのコンポーネントが完了しました。

ステップ3—フォームを試す

次に、Webブラウザでフォームを表示します。

ターミナルウィンドウを使用して、プロジェクトディレクトリにいることを確認します。次のコマンドでプロジェクトを開始します。

npm start

案内する localhost:3000 Webブラウザで。

アプリケーションにステップ1-ユーザー詳細の入力が表示されます。

情報を入力して保存して続行をクリックすると、ステップ2-個人情報の入力に移動します。

情報を入力して保存して続行をクリックすると、ステップ3-詳細の確認に移動します。

確認をクリックすると、ステップ4-成功に移動します。

これで、Reactで機能するマルチステップフォームができました。

結論

マルチステップフォームは、フォームをセクションに分割する必要がある場合に最適です。また、次のステップに進む前に、各ステップでフォーム検証を実行することもできます。

の使用 switch ステップ間のルーティングに関するステートメントにより、ルーターが不要になります。つまり、ルーティングを調整しなくても、フォームを他のコンポーネントにプラグインできます。

必要に応じて、ステップの間にAPI呼び出しを設定することもできます。これにより、多くの新しい可能性が開かれます。

Redux などの状態管理ツールを追加することで、状態をより適切に処理することもできます。

Reactの詳細については、Reactトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036

序章

前提条件

ステップ1—セマンティックUIを使用して新しいReactプロジェクトを初期化する

ステップ2—コンポーネントの作成

の構築 MainForm 成分

の構築 UserDetails 成分

の構築 PersonalDetails 成分

の構築 Confirmation 成分

の構築 Success 成分

ステップ3—フォームを試す

結論

getdocs

の構築 `MainForm` 成分

の構築 `UserDetails` 成分

の構築 `PersonalDetails` 成分

の構築 `Confirmation` 成分

の構築 `Success` 成分