Question

我有一个＆＃39; Auth＆＃39;带有＆＃39; signIn（）＆＃39;的课程我试图通过登录＆＃39;组件，返回错误＆＃39;不是函数＆＃39;当它试图在“登录”中使用回调时。

我尝试通过使用道具（例如this.props.auth.signIn()）来引用Auth类/服务，并直接通过调用Login组件中的类来引用（例如this.auth ），但都会导致同样的错误。

我试图按照官方文档中使用的方法，在https://github.com/auth0-samples/auth0-react-samples/blob/embedded-login/02-Custom-Login-Form/src/Login/Login.js处查看Auth0的反应样本。

Auth.js：

import auth0 from 'auth0-js';
import { auth_config } from './auth0-config';
import createHistory from 'history';

export default class Auth {

  auth0 = new auth0.WebAuth({
      ...
  })

  constructor() {
        this.signIn = this.signIn.bind(this);
  }

  signIn(username, password) {
        this.auth0.login(
              {
                    realm: auth_config.dbConnectionName,
                    username,
                    password
              },
              (err, authResult) => {
                    if (err) {
                          console.error('Authentication error at \'services/auth/Auth.js\' - signIn() method:', err);
                          alert(`Error: ${err.description}. Check the console for further details.`);
                    }
              }
        )
  }

Login.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Auth from 'services/auth/Auth.js';

import { Dimmer, Modal, Header, Form, Button } from 'semantic-ui-react';

export default class LoginComponent extends React.Component {

  constructor() {
    super();
    this.state = {
        showModal: true,
        username: null,
        password: null,
        authorised: false
    }
  }

  componentDidMount() {
    console.log('Login.props:', this.props);
  }

  hide = () => {
    console.log('LoginComponent.hide()');
    this.setState({
        showModal: false
    })
  }

  getLoginCredentials() {
    return {
        email: ReactDOM.findDOMNode(this.refs.email).value,
        password: ReactDOM.findDOMNode(this.refs.password).value
    }
  }

  signIn() {
    //   console.log('LoginComponent.signIn(\'' + this.state.username + '\', \'' + this.state.password + '\')');

    const user = this.getLoginCredentials();
    this.props.auth.signIn(user.email, user.password);
  }

Answer 1

您必须创建该类的对象，然后使用该对象，您可以在Login.js中调用该函数，

signIn() {

    const user = this.getLoginCredentials();
    let signinObj = new Auth();
    signinObj.signIn(user.email, user.password);
  }

编辑：在router.js文件的github page,中，您可以看到该声明，

  <Route path="/login" render={(props) => <Login auth={auth} {...props} />} />

auth是此类的对象，它作为props传递给Login类。

React - 从另一个组件调用类功能 - ＆＃39;不是一个功能＆＃39;

1 个答案: