使用create-react-app开发时Login组件出现未定义及event使用错误求助

看起来你在React类组件的事件处理上遇到了两个常见问题，我帮你逐个拆解并修复：

错误1：'handleClick' is not defined no-undef #

这个错误的核心原因是你没有在Login组件类的内部定义handleClick方法，或者定义的位置不对（比如放到了类外面）。对于React类组件来说，事件处理方法必须是类的成员函数，才能在render里通过this访问到。

错误2：Unexpected use of 'event' no-restricted-globals #

这个是ESLint的规则报错——你直接使用了全局的event变量，而没有通过事件处理函数的参数来接收事件对象。全局event在不同浏览器环境下可能有兼容性问题，所以ESLint的no-restricted-globals规则会禁止这种写法。

修复后的完整代码示例 #

下面是针对你的Login.js修改后的代码，我保留了你原有的导入部分，补充了正确的事件处理逻辑：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Checkbox, Col, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';

class Login extends Component {
  // 方式1：用箭头函数定义方法，自动绑定this（推荐）
  handleClick = (event) => {
    // 先阻止默认行为（比如表单提交的刷新），根据你的需求调整
    event.preventDefault();
    
    // 这里写你的登录逻辑，比如获取表单值、发起登录请求等
    console.log('登录按钮已点击');
  }

  render() {
    return (
      <Form>
        {/* 这里可以放你的用户名、密码输入框等表单元素 */}
        <FormGroup controlId="formEmail">
          <Col componentClass={ControlLabel} sm={2}>
            邮箱
          </Col>
          <Col sm={10}>
            <FormControl type="email" placeholder="输入邮箱" />
          </Col>
        </FormGroup>

        <FormGroup controlId="formPassword">
          <Col componentClass={ControlLabel} sm={2}>
            密码
          </Col>
          <Col sm={10}>
            <FormControl type="password" placeholder="输入密码" />
          </Col>
        </FormGroup>

        <FormGroup>
          <Col smOffset={2} sm={10}>
            <Checkbox>记住我</Checkbox>
            {/* 绑定handleClick方法到按钮的onClick事件 */}
            <Button onClick={this.handleClick}>登录</Button>
          </Col>
        </FormGroup>
      </Form>
    );
  }
}

// 这里可以添加你的propTypes定义
Login.propTypes = {
  // 示例：如果有父组件传递的回调，可以这样定义
  // onLoginSuccess: PropTypes.func.isRequired
};

export default Login;

关键改动说明 #

1. 正确定义handleClick方法：把方法放到Login类的内部，用箭头函数形式可以自动绑定this，避免后续使用时this指向错误的问题。
2. 通过参数接收event：在handleClick的参数里声明event，替代全局的event变量，符合ESLint规则同时提升兼容性。
3. 正确绑定事件：在Button的onClick属性里用this.handleClick引用方法，确保能访问到类内部的方法。

另一种写法（普通函数+手动绑定this） #

如果你习惯用普通函数定义方法，需要在constructor里手动绑定this：

class Login extends Component {
  constructor(props) {
    super(props);
    // 手动绑定this到handleClick方法
    this.handleClick = this.handleClick.bind(this);
  }

  // 普通函数形式的事件处理方法
  handleClick(event) {
    event.preventDefault();
    // 你的登录逻辑
  }

  // render部分和上面的示例一致
}

这样修改后，两个错误应该都能解决啦！

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