【问题标题】:'Form' is not defined react/jsx-no-undef'Form' 未定义 react/jsx-no-undef
【发布时间】:2019-10-05 22:28:13
【问题描述】:

您好,下面的应用程序反应我必须管理一个表单来验证登录到一个页面,参数是电子邮件和密码,但是当我执行代码时会打印以下错误,错误:第 33 行:'表单'未定义 react/jsx-no-undef

Javascript 代码:

import React, { Component } from 'react';
import { Button, FormGroup, FormControl, ControlLabel } 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;

【问题讨论】:

  • react 正在尝试使用名为 Form 的组件,请改用 form(小写)

标签: javascript reactjs


【解决方案1】:

好像忘了导入Form,直接加吧:

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

【讨论】:

    猜你喜欢
    • 2019-11-10
    • 2018-03-18
    • 2022-01-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-28
    • 1970-01-01
    • 2020-12-21
    相关资源
    最近更新 更多