"react/jsx-no-undef error: 'Borang' tidak ditakrifkan"

Question

Hai, menggunakan aplikasi React di bawah, saya perlu mengurus borang untuk mengesahkan log masuk ke halaman, parameternya ialah e-mel dan kata laluan, tetapi apabila saya melaksanakan kod, ralat berikut dicetak, Ralat: ; Baris 33: 'Borang' ialah undefined react/jsx-no-undef

Kod JavaScript:

import React, { Komponen } daripada 'react';
import { Button, FormGroup, FormControl, ControlLabel } daripada "react-bootstrap";
import logo daripada './logo.svg';

import './Home.css';

Kelas Utama memanjangkan Komponen {
  pembina(props) {
    super(props);

    this.state = {
      e-mel: "",
      kata laluan: ""
    };
  }

  validateForm() {
    kembalikan this.state.email.length 0 && this.state.password.length >
  }
  handleChange = acara =>
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  handleSubmit = acara =>
    event.preventDefault();
  }

  render() {
    kembali (
      <div className="Log Masuk">
        <Borang padaSubmit={this.handleSubmit}>
          <Form.Group controlId="email" bsSize="large">
            <Borang.Kawalan
              autofokus
              type="e-mel"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </Form.Group>
          <Form.Group controlId="password" bsSize="large">
            <Borang.Kawalan
              value={this.state.password}
              onChange={this.handleChange}
              type="kata laluan"
            />
          </Form.Group>
          <Butang
            blok
            bsSize="besar"
            disabled={!this.validateForm()}
            type="submit"
          >
            Log masuk
              </Butang>
        </Borang>
      </div>
    );
  }
}

eksport lalai Laman Utama;

Answer 1

Nampaknya anda terlupa mengimport Form, tambah sahaja:

import { Form, Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";