React Bootstrapフォームのテキスト入力フィールドの作成方法

単純なテキスト入力フィールド: React BootstrapのFormControlコンポーネントを使用して、単純なテキスト入力フィールドを作成できます。以下は、基本的な例です。

import React from 'react';
import { Form, FormControl, Button } from 'react-bootstrap';
function MyForm() {
  return (
    <Form>
      <Form.Group controlId="exampleForm.ControlInput1">
        <Form.Label>名前</Form.Label>
        <FormControl type="text" placeholder="名前を入力してください" />
      </Form.Group>
      <Button variant="primary" type="submit">
        送信
      </Button>
    </Form>
  );
}
export default MyForm;

バリデーション付きのテキスト入力フィールド: バリデーションを追加して、ユーザーが正しい形式でデータを入力するようにすることもできます。以下は、バリデーション付きのテキスト入力フィールドの例です。

import React, { useState } from 'react';
import { Form, FormControl, Button } from 'react-bootstrap';
function MyForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  const handleSubmit = (event) => {
    event.preventDefault();
    if (name === '') {
      setError('名前を入力してください');
    } else {
      // フォームの送信処理を実行する
    }
  };
  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="exampleForm.ControlInput1">
        <Form.Label>名前</Form.Label>
        <FormControl
          type="text"
          placeholder="名前を入力してください"
          value={name}
          onChange={(event) => setName(event.target.value)}
          isInvalid={error !== ''}
        />
        <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
      </Form.Group>
      <Button variant="primary" type="submit">
        送信
      </Button>
    </Form>
  );
}
export default MyForm;

これらはReact Bootstrapを使用してテキスト入力フィールドを作成する基本的な例です。必要に応じて、他の機能やスタイリングを追加することもできます。詳細なドキュメントや他のコンポーネントの例については、公式のReact Bootstrapドキュメントを参照してください。