Question

我做了一个反应网络应用程序，它应该隐藏登录页面上的导航栏然后它应该在所有其他页面成功登录后重新出现。我在登录页面隐藏标题的方法是通过创建一个函数，但登录按钮位于另一个页面（Authen.js），该函数位于App.js我的问题是我无法调用从第一页到另一页的功能。

./src/App.js
  Line 69:  'operation' is not defined  no-undef 

import React, { Component } from 'react';
import './App.css';
import Authen from './Pages/Authen'
import Home from './Pages/Home';
import secondpage from './Pages/secondpage';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
var firebase = require('firebase');


class App extends Component {
      constructor(props){
          super(props);

          this.state = {
          ShowMe:false
          };
        }

         operation(){
          this.setState({
            ShowMe:true
          })
        }

    render(){
      return(
        <div>
          <Router >
          <div>
            <div>
            {
              this.state.ShowMe?
              <ul>


                <li><Link to="/Home">Home</Link></li>
                <li><Link to="/secondpage">secondpage</Link></li>
              </ul>
              :null
            }

          </div>
          <Route exact path="/" component={Authen}/>
          <Route path="/Home" component={Home}/>
          <Route path="/secondpage" component={secondpage}/>
          </div>
        </Router>
    </div>
      );
    }
  }
export default App;

登录页面：

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'
import {operation} from '../App'
var firebase = require('firebase');

class Authen extends React.Component {


    Login = () => {
                //login method
    const email = this.refs.email.value;
    const password = this.refs.password.value;
    console.log(email,password);

    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, password);


    promise.catch(e =>{
      var err = e.message;
      console.log(err);
      this.setState({err: err});
    });
    //gets user uid
    firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log(user.uid);
 this.props.history.push('/Home');
 operation();
  }
});
}


constructor(props){
    super(props);

    this.state = {
        err:''
    };
    this.Login = this.Login.bind(this);
  }
  render(){
    return(
        <div className="login_div">
          <div  className="main-div">
   <h3>N.N.NASSAR</h3>
    <input ref="email" type="email" placeholder="Email..." id="email_field" />
    <input ref="password" type="password" placeholder="Password..." id="password_field" />
    <p>{this.state.err}</p>
     <button onClick={() => this.Login() || this.operation()} id="Login"> Login </button>
    <button onClick={this.signup}>Sign Up</button>
  </div>
      </div>
    );
  }
}

export default withRouter(Authen);

谢谢你的时间：）

Answer 1

如果我理解你的问题，你想从另一个组件调用App的'operation'方法，你想要这样做的原因是你想要从App和其他组件设置App的状态。 / p>

一种简单的方法是使用redux并访问redux存储中的全局状态，在那里您将保存要从两个组件更新的状态。

从两个不同的页面调用一个函数

1 个答案: