Reactstrapを使用してReactでフォームを作成する方法

投稿日: 2022-04-20 2022-04-20
タグ: React

序章

Reactstrap は、事前に構築されたBootstrap 4コンポーネントを提供し、非常に高い柔軟性と事前に構築された検証を可能にします。これにより、印象的で直感的なユーザーエクスペリエンスを提供することが保証されている美しいフォームをすばやく作成できます。

このチュートリアルでは、Reactstrapを使用して、Reactアプリケーションでサインインフォームを作成します。

前提条件

Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
Reactにある程度精通している。 React.jsシリーズのコーディング方法を読むことができます。
Bootstrap4にある程度精通している。公式のBootstrap4.6ドキュメントを読むことができます。

このチュートリアルは、ノードv16.2.0、npm v7.14.0、react v17.0.2、reactstrap v8.9.0、およびbootstrapv4で検証されました。 6.0。

ステップ1—プロジェクトの設定

create-react-app を使用してReactアプリを生成し、依存関係をインストールすることから始めます。

npx create-react-app reactstrap-example

新しいプロジェクトディレクトリに移動します。

cd reactstrap-example

これで、Reactアプリケーションを実行できます。

npm start

プロジェクトのエラーや問題を修正します。そして、Webブラウザでlocalhost:3000にアクセスします。

動作するReactアプリケーションができたら、reactstrapをインストールできます。

npm install reactstrap@8.9.0

次に、bootstrapをインストールできます。

npm install bootstrap@4

注： Reactstrapを使用する場合は、互換性のあるバージョンがインストールされるように、Bootstrapの4.xバージョンを指定することが重要です。バージョンを指定しないと、現在5.xである最新バージョンのBootstrapがインストールされます。

次に、コードエディタでsrc/index.jsファイルを開きます。プロジェクトでブートストラップスタイルを使用するには、次の行を追加します。

src / index.js

import 'bootstrap/dist/css/bootstrap.min.css';

この時点で、ReactstrapとBootstrapの依存関係を持つ新しいReactアプリケーションが作成されます。

ステップ2—フォームコンポーネントの使用

Reactstrapを使用すると、標準のテキストInputからより高度なファイルアップロードInputまで、あらゆるものを含むFormコンポーネントを事前に構築できます。

まず、reactstrapからComponentsをインポートします。この例では、Button、Form、FormGroup、Input、およびLabelをインポートして、サインインで直接使用します。形。

import {
  Button,
  Form,
  FormGroup,
  Input,
  Label
} from 'reactstrap';

必要なコンポーネントが揃ったので、フォームを作成しましょう。

Reactstrapは、type、name、id、placeholderなどのpropsを取り込みます。

typeは、ファイルのアップロード、ラジオボタン、または電子メールなどのさらに具体的なテキスト入力などの入力の種類を定義します。
nameは、最終的にバックエンドに送信されるキーと値のペアのキーです。
idは、DOMを操作するときに使用するものです。
placeholderを使用すると、入力にサンプルテキストを追加できます。

コードエディタでApp.jsを開き、次のコード行を追加します。

src / App.js

import { Component } from 'react';
import {
  Button,
  Form,
  FormGroup,
  Input,
  Label
} from 'reactstrap';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Sign In</h2>
        <Form className="form">
          <FormGroup>
            <Label for="exampleEmail">Username</Label>
            <Input
              type="email"
              name="email"
              id="exampleEmail"
              placeholder="[email protected]"
            />
          </FormGroup>
          <FormGroup>
            <Label for="examplePassword">Password</Label>
            <Input
              type="password"
              name="password"
              id="examplePassword"
              placeholder="********"
            />
          </FormGroup>
        <Button>Submit</Button>
      </Form>
    </div>
  );
}

export default App;

次に、コードエディタでApp.cssを開き、次のスタイルに置き換えます。

App.css

.App {
  border: 2px solid #d3d3d3;
  border-radius: .5em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  padding: 1em;
  text-align: left;
  width: 600px;
}

.form {
  padding: 1em;
}

label {
  font-weight: 600;
}

変更を保存し、Webブラウザでアプリケーションを確認します。

Screenshot of the application with a sign-in form with fields for email and password.

Reactstrapは、フォームコンポーネントのスタイルを設定するための複数の組み込みの方法を提供します。役立つ可能性のある重要な項目のいくつかを次に示します。

色：Reactstrapは、has-successのようなclassNameを使用する場合、Bootstrapの組み込み色をサポートします。
インラインフォーム：<Form>内に、<Form inline>を追加して、LabelとInputを同じ行に配置できます。
コンテナ、行、および列：<Col>は、Bootstrapの列に対するReactstrapのラッパーです。これにより、デスクトップだけでなく、モバイルやタブレットにもフォーマットできます。

この時点で、Bootstrapスタイルを使用したサインインフォームを備えたReactアプリケーションができました。

ステップ3—検証とユーザーヒントの追加

FormTextを使用すると、フィールドの上または下にインジケーターテキストを追加できます。

この例では、「ユーザー名」フィールドは電子メールアドレスの形式の値を期待します。 FormTextが追加され、期待値をユーザーに通知します。

<FormText>Your username is most likely your email.</FormText>

変更を保存し、Webブラウザでアプリケーションを確認します。

Screenshot of the sign-in form. An arrow is pointed at the FormText message under the Username field.

この例にFormFeedbackを追加する前に、状態を管理する必要があります。

constructor(props) {
  super(props);
  this.state = {
    email: '',
    validate: {
      emailState: '',
    },
  };
}

render() {
  const { email } = this.state;
  // ...
}

そして、フォームへの変更を処理します。

constructor(props) {
  super(props);
  // ...
  this.handleChange = this.handleChange.bind(this);
}

handleChange = (event) => {
  const { target } = event;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const { name } = target;

  this.setState({
    [name]: value,
  });
};

FormFeedbackはフィールドを即座に検証します。入力検証をカスタマイズする柔軟性があります。 onChangeイベントで電子メールを検証するための正規表現を使用して関数を追加し、has-successまたはhas-dangerを状態に設定します。

validateEmail(e) {
  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  const { validate } = this.state;

  if (emailRegex.test(e.target.value)) {
    validate.emailState = 'has-success';
  } else {
    validate.emailState = 'has-danger';
  }

  this.setState({ validate });
}

警告：電子メールアドレスを検証するための標準仕様があります。この簡略化された正規表現は、チュートリアルの目的でのみ提供されています。

これをInputに適用するには、validプロップを条件付きで追加します。

valid={ this.state.validate.emailState === 'has-success' }

そして、invalidプロップと条件付き：

invalid={ this.state.validate.emailState === 'has-danger' }
/>

FormFeedbackを作成して、デフォルトで失敗テキストを表示します。

<FormFeedback>
  Uh oh! Looks like there is an issue with your email. Please input a correct email.
</FormFeedback>

validプロップを使用して2番目のFormFeedbackを作成し、成功テキストを表示します。

<FormFeedback valid>
  That's a tasty looking email you've got there.
</FormFeedback>

次に、value、validateEmail、およびhandleChangeをInputに追加します。

<Input
  type="email"
  name="email"
  id="exampleEmail"
  placeholder="[email protected]"
  valid={ this.state.validate.emailState === 'has-success' }
  invalid={ this.state.validate.emailState === 'has-danger' }
  value={ email }
  onChange={ (e) => {
                      this.validateEmail(e);
                      this.handleChange(e);
                    } }
/>

ユーザーがユーザー名を間違って入力すると、has-dangerスタイルのフィードバックが表示されます。

Screenshot of the sign-in form. The invalid FormFeedback message is displayed because the username did not satisfy the validation pattern.

また、ユーザー名を正しく入力すると、ユーザーはhas-successスタイルでフィードバックを受け取ります。

Screenshot of the sign-in form. The valid FormFeedback message is displayed because the username did satisfy the validation pattern.

これで、フォームはFormText、FormFeedback、および検証を使用します。

ステップ4—フォームを送信する

最後に、送信時に通常はデータベースにデータを送信しますが、この例では、submitForm関数を使用して電子メールをコンソールログに記録します。

submitForm(e) {
  e.preventDefault();
  console.log(`Email: ${ this.state.email }`);
}

すべての部品が配置されると、App.jsは次のようになります。

src / App.js

import { Component } from 'react';
import {
  Form,
  FormFeedback,
  FormGroup,
  FormText,
  Label,
  Input,
  Button,
} from 'reactstrap';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      validate: {
        emailState: '',
      },
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    const { target } = event;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const { name } = target;

    this.setState({
      [name]: value,
    });
  };

  validateEmail(e) {
    const emailRex =
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    const { validate } = this.state;

    if (emailRex.test(e.target.value)) {
      validate.emailState = 'has-success';
    } else {
      validate.emailState = 'has-danger';
    }

    this.setState({ validate });
  }

  submitForm(e) {
    e.preventDefault();
    console.log(`Email: ${this.state.email}`);
  }

  render() {
    const { email, password } = this.state;

    return (
      <div className="App">
        <h2>Sign In</h2>
        <Form className="form" onSubmit={(e) => this.submitForm(e)}>
          <FormGroup>
            <Label>Username</Label>
            <Input
              type="email"
              name="email"
              id="exampleEmail"
              placeholder="[email protected]"
              valid={this.state.validate.emailState === "has-success"}
              invalid={this.state.validate.emailState === "has-danger"}
              value={email}
              onChange={(e) => {
                this.validateEmail(e);
                this.handleChange(e);
              }}
            />
            <FormFeedback>
              Uh oh! Looks like there is an issue with your email. Please input
              a correct email.
            </FormFeedback>
            <FormFeedback valid>
              That's a tasty looking email you've got there.
            </FormFeedback>
            <FormText>Your username is most likely your email.</FormText>
          </FormGroup>
          <FormGroup>
            <Label for="examplePassword">Password</Label>
            <Input
              type="password"
              name="password"
              id="examplePassword"
              placeholder="********"
              value={password}
              onChange={(e) => this.handleChange(e)}
            />
          </FormGroup>
          <Button>Submit</Button>
        </Form>
      </div>
    );
  }
}

export default App;

結論

このチュートリアルでは、Reactstrapを使用してReactアプリケーションでサインインフォームを作成しました。これにより、Reactコンポーネントを備えたBootstrap4要素を使用してビルドできます。

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

getdocs

13036