Reactjs 如何使用`console.log`以便调试代码？

当我点击登录按钮时，我试图进入登录表单页面，但现在它没有做任何事情，我无法想出如何使用console.log来调试代码

这是一个主页，其中导航是实时的，所有其他组件将显示

import React, { Component } from "react"
import history from '../history';
import Navigation from '../../layouts/navigation';

export default class Home extends Component {
  componentDidMount() {
    history.push('/home');
  }

  showLoginBox() {
    this.setState({isLoginOpen: true, isRegisterOpen: false});
  }

  showRegisterBox() {
    this.setState({isRegisterOpen: true, isLoginOpen: false});
  }

  render() {
    return (
      <div id="home">
          <Navigation showRegisterBox={this.showRegisterBox.bind(this)} showLoginBox={this.showLoginBox.bind(this)}/>
      </div>
    );
  }
}

这就是表单的所在地：

import React from 'react';
import RegisterBox from '../Forms/Register'
import LoginBox from '../Forms/Login'


// This is the page for form to live on
class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoginOpen: true,
      isRegisterOpen: false
    };
  }

    render() {
        return (
          <div>
            <div className="root-container">
                {this.state.isLoginOpen && <LoginBox/>}
                {this.state.isRegisterOpen && <RegisterBox/>}
            </div>
          </div>
        )
    }
}

export default App;

这是登录和注册的导航按钮处于活动状态的地方

import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import "../components/pages/Forms/MainScreen";
import Dropdown from "../components//pages/dropdowns/dropdowns"; 
import hamburger from "../images/menu.svg"


class Navigation extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isExpanded: false
        };
    }

    handleToggle(e) {
        e.preventDefault();
        this.setState(prevState => ({
          isExpanded: !prevState.isExpanded, // negate the previous expanded state
        }));
      }

    showLoginBox() {
        this.setState({isLoginOpen: true, isRegisterOpen: false}); // The Logic form will show when the users click the login button
    }

    showRegisterBox() {
        this.setState({isRegisterOpen: true, isLoginOpen: false}); // The Signup form will show when the users click the login button
    }

    render() {

        const { isExpanded } = this.state;

      return (
          <Router>
              <div className="NavbarContainer">
                  <div className="mobilecontainer LeftNav">
                      <h2 className="BrandName LeftNav mobileboxmenu inline FarRight">Kommonplaces</h2>
                      <div className="hamburger inlinev" >
                          <img 
                            onClick={e => this.handleToggle(e)}
                            alt="menubtn" 
                            src={hamburger}
                          />
                      </div>
                  </div>


                  <ul className={`NavBar collapsed ${isExpanded ? "is-expanded" : ""}`}>
                        <Dropdown/>    
                        <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                        <li className="RightNav"><Link to="/">About Us</Link></li>
                        <li className="RightNav"><Link to="/">Contact Us</Link></li>
                        <div className="btnflexright">
                        <button
                            className={"controller " + (this.state.isLoginOpen
                            ? "selected-controller"
                            : "")}
                            onClick={this
                            .props
                            .showLoginBox}>
                            Login
                        </button>

                        <button
                            className={"controller " + (this.state.isRegisterOpen
                            ? "selected-controller"
                            : "")}
                            onClick={this
                            .props
                            .showRegisterBox}>
                            Sign up
                        </button>
                        </div>
                  </ul>
               </div>
         </Router>
      );
    }
}

  export default Navigation;

这是我的表单代码，但它们都是一样的：

//Login Box 
import React from 'react';

class LoginBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

      render() {
          return (
            <div>
                <div className="formContent modal-main">
                    <h2>Welcome Back <span>Brandon!</span></h2>
                    <form>                         
                        <input 
                            type="text" 
                            name="email" 
                            placeholder="Email Address" 
                        />

                        <input 
                            name="password" 
                            type="text" 
                            placeholder="Password" 

                        />

                        <div className="passContent">
                            <div className="checkingPass">
                                <input 
                                    className="inline" 
                                    type="checkbox" 
                                    name="check" 
                                    value="Remember Password"
                                />
                                <span 
                                    className="inline">
                                    Remember Password
                                </span>
                            </div>
                                <p 
                                    className="passFont">
                                    Forgot Password
                                </p>
                        </div>

                        <input 
                            className="formmbtn" 
                            type="button" 
                            name="button" 
                            alue="Login"
                        />

                        <div 
                            className="social-media-button">
                            <input 
                                className="clearbtn" 
                                type="button" 
                                name="button" 
                                value="Sign in with Facebook"
                            />

                            <div 
                                className="divider"
                            />

                            <input 
                                className="clearbtn" 
                                type="button" 
                                name="button" 
                                value="Sign in with Facebook"
                            />

                        </div>

                        <p 
                            className="passFont">
                            Don't have an account? 
                            <span>Sign up</span>
                        </p>

                    </form>
                </div>
            </div>               
          )
      }
  }

  export default LoginBox;

---

您可以在组件内部（返回jsx的内部除外）控制台任何位置，如果您希望在jsx内部也可以这样操作

return(
 <>
  {console.log('inside return')}
 <>
)

在您的登录功能中

showLoginBox() {
   console.log('login function clicked');
   this.setState({isLoginOpen: true, isRegisterOpen: false}); 
}

---

您可以尝试在Home组件的函数showLoginBox中添加console.log语句，以查看当您单击按钮时它是否运行。这只是一个函数。像console.log“test”一样使用它实际上，在导航和主页组件中似乎有一个名为showLoginBox的方法。我假设您想按下按钮并更改应用程序组件的状态，但我不确定组件的层次结构是什么。应用程序在哪里使用？是的，@khuynh抱歉，错误解释我想知道当有人点击button@khuynh现在，层次结构的起点是home.js，在开始构建组件之后，所有组件都将位于该位置

constructor(props){
 super(props)
 console.log('Inside constructor')
}

showLoginBox() {
   console.log('login function clicked');
   this.setState({isLoginOpen: true, isRegisterOpen: false}); 
}