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

序章

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

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

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

前提条件

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

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

このチュートリアルは、ノードv14.0.0、npm v6.14.4、react v16.13.1、semantic-ui-react v0.88.2、およびsemantic-ui-cssv2.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 [email protected]

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

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

npm install [email protected]

カスタムセマンティック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;

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

このコードでは、Semantic UIReactのGridコンポーネントを使用しました。これにより、テキストを中央に配置し、パディングを追加することで、見やすくなります。

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

MainFormコンポーネントの構築

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

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

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の値を更新して、ユーザーがレンダリングされたコンポーネントを切り替えることができるようにします。

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;

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

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

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

また、各入力フィールドには、MainFormコンポーネントの状態から選択するdefaultValueが提供されていることに気付いたかもしれません。 これにより、ユーザーが別のステップから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

Webブラウザでlocalhost:3000に移動します。

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

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

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

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

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

結論

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

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

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

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

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