React Bootstrapを使用したフォームコントロールとテキストエリアの実装方法

1. コンポーネントのインポート: まず、必要なコンポーネントをインポートします。

import React from 'react';
import { Form, FormControl, FormGroup, FormLabel, Button } from 'react-bootstrap';

2. フォームコントロールの作成: フォームコントロールを作成するために、FormControlコンポーネントを使用します。

const MyForm = () => {
  return (
    <Form>
      <FormGroup>
        <FormLabel>名前</FormLabel>
        <FormControl type="text" placeholder="名前を入力してください" />
      </FormGroup>
      <FormGroup>
        <FormLabel>メールアドレス</FormLabel>
        <FormControl type="email" placeholder="メールアドレスを入力してください" />
      </FormGroup>

      <Button variant="primary" type="submit">
        送信
      </Button>
    </Form>
  );
};

3. テキストエリアの作成: テキストエリアを作成するために、FormControlコンポーネントのas属性を使用します。

const MyForm = () => {
  return (
    <Form>
      <FormGroup>
        <FormLabel>名前</FormLabel>
        <FormControl type="text" placeholder="名前を入力してください" />
      </FormGroup>
      <FormGroup>
        <FormLabel>コメント</FormLabel>
        <FormControl as="textarea" rows={3} placeholder="コメントを入力してください" />
      </FormGroup>

      <Button variant="primary" type="submit">
        送信
      </Button>
    </Form>
  );
};

これらはReact Bootstrapを使用してフォームコントロールとテキストエリアを実装する一般的な方法です。適切なコンポーネントと属性を使用して、フォームの要件に合わせて調整することができます。また、必要に応じてスタイルやバリデーションを追加することもできます。

この投稿では、React Bootstrapを使用してフォームコントロールとテキストエリアを実装する方法を紹介しました。これにより、ユーザーが入力内容を簡単に入力できるフォームを作成することができます。