javascript - TypeError : _this2. handleClick 不是 ReactJS 中的函数

Question

我是 ReactJS 新手，正在使用 React JS 和 laravel API 创建登录页面。当我在插入电子邮件地址和密码后单击登录按钮时，它显示上述错误。

这是我的代码

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import axios from 'axios';
import  { Redirect } from 'react-router-dom'


class Login extends Component
{
  onClick(event)
  {
    var self = this;
    var payload={
      "email":this.state.email,
      "password":this.state.password
    }
  //"role":this.state.loginRole

    axios.post('http://127.0.0.1:8000/api/login', payload)
    .then(function (response)
    {
      console.log(response);
      if(response.data.code == 200)
      {
        //Set localstorage:
        const userDetails = {userName: this.state.email}
        localStorage.setItem('userDetails', JSON.stringify(userDetails));

        console.log("Login successfull");
        return <Redirect to='/Master'  />

        var uploadScreen=[];
        //  uploadScreen.push(<UploadPage appContext={self.props.appContext} role={self.state.loginRole}/>)
        self.props.appContext.setState({loginPage:[],uploadScreen:uploadScreen})
      }
      else if(response.data.code == 204)
      {
        console.log("Username password do not match");
        alert(response.data.success)
      }

      else
      {
        console.log("Username does not exists");
        alert("Username does not exist");
      }
    })

    .catch(function (error)
    {
      console.log(error);
    });
}
  render()
  {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <h1>Login</h1>
                    <p className="text-muted">Sign In to your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="text" placeholder="Username" />
                    </InputGroup>
                    <InputGroup className="mb-4">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="password" placeholder="Password" />
                    </InputGroup>
                    <Row>
                      <Col xs="6">
                        <Button color="primary" className="px-4" onClick={(event) => this.handleClick(event)}>
                          Login
                        </Button>
                      </Col>
                      <Col xs="6" className="text-right">
                        <Button color="link" className="px-0">
                          Forgot password?
                        </Button>
                      </Col>
                    </Row>
                  </CardBody>
                </Card>
                <Card
                  className="text-white bg-primary py-5 d-md-down-none"
                  style={{ width: 44 + "%" }}
                >
                  <CardBody className="text-center">
                    <div>
                      <h2>Sign up</h2>
                      <p>
                        Are you a new user to the Restaurant system? Hooray now , you can create an account...
                      </p>
                      <Button color="primary" className="mt-3" active>
                        Register Now!
                      </Button>
                    </div>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Login;

在本例中，我给出了以下内容作为有效负载

Username : admin@admin.com
Password : 123456

以上凭证在 Laravel API 中有效。这段代码有什么错误导致错误 TypeError: _this2.handleClick is not a function？

Answer 1

你的函数被定义为onClick而不是handleClick，另外，如果你只需要调用带有默认参数(例如事件)的函数，则不需要要使用箭头功能，您可以简单地编写

onClick={this.onClick} 

并将其绑定(bind)在构造函数中或使用箭头函数将其定义为类属性

onClick = (event) => {}

或

constructor(props){
   super(props);
   this.onClick = this.onClick.bind(this);
}

此外，应该呈现 Redirect ，但无法从 axios 请求或 onClick 处理程序中呈现它。相反，您可以使用 this.props.history.push 进行重定向。检查Programmatically Navigate using react-router询问更多详情