React登录表单开发报错：'Form' is not defined react/jsx-no-undef

这个错误的根源很明确：你在JSX里使用了<Form>组件，但完全没从react-bootstrap库中导入它。另外代码里还有个小不一致——你导入了FormGroup和FormControl，但JSX里却用了Form.Group和Form.Control（这是react-bootstrap新版本的标准写法）。

修复步骤 #

1. 更新导入语句：把Form加入react-bootstrap的导入列表，同时可以移除单独的FormGroup和FormControl导入（新版本里它们是Form的子组件，不需要单独导入）。
2. 保持JSX写法一致性：继续使用你已经写好的Form.Group和Form.Control，这是当前react-bootstrap推荐的用法。

修改后的完整代码 #

import React, { Component } from 'react';
import { Button, Form } from "react-bootstrap"; 
import logo from './logo.svg';
import './Home.css';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }

  validateForm() {
    return this.state.email.length > 0 && this.state.password.length > 0;
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  handleSubmit = event => {
    event.preventDefault();
    // 这里可以添加实际登录逻辑，比如调用后端接口验证邮箱密码
  }

  render() {
    return (
      <div className="Login">
        <Form onSubmit={this.handleSubmit}>
          <Form.Group controlId="email" bsSize="large">
            <Form.Control autoFocus type="email" value={this.state.email} onChange={this.handleChange} />
          </Form.Group>
          <Form.Group controlId="password" bsSize="large">
            <Form.Control value={this.state.password} onChange={this.handleChange} type="password" />
          </Form.Group>
          <Button block bsSize="large" disabled={!this.validateForm()} type="submit" >
            Login
          </Button>
        </Form>
      </div>
    );
  }
}

export default Home;

额外提示 #

• 记得在handleSubmit方法里补充实际的登录逻辑，比如发送请求到后端校验用户信息。
• 如果你的react-bootstrap版本偏旧，可能需要用单独导入FormGroup和FormControl的写法，那就要把JSX里的Form.Group改成<FormGroup>、Form.Control改成<FormControl>，同时保留原来的导入语句。不过更建议升级到新版本，使用更简洁的组件嵌套写法。

内容的提问来源于stack exchange，提问作者riki