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，而且，如果仅需要使用默认参数（例如event）调用函数，则无需使用箭头函数，您只需编写

onClick={this.onClick}

并将其绑定在constructor中，或使用箭头函数将其定义为类属性

onClick = (event) => {}

或

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

还应该渲染Redirect，但不能从axios请求或onClick处理程序中渲染它。相反，您可以使用this.props.history.push进行重定向。查看Programmatically Navigate using react-router问题以获取更多详细信息

Answer 2

我相信您想将onClick命名为handleClick

TypeError：_this2.handleClick不是ReactJS中的函数

2 个答案: