javascript - 如何在 NavBar 中做出 onClick 事件 react ？

Question

我正在制作我的第一个 React 项目。我在 JS、HTML、CSS 甚至 Web 应用程序编程方面都是新手。

我想做的是在单击按钮时显示一些信息。

我有我的主要默认组件，App.js。它看起来像这样:

import React, { Component } from "react";
import Navbar from "./Components/Navbar";
import "./Styles/App.css";
import ProjectsList from "./Components/Projects/ProjectsList";
import axios from "axios";

class App extends Component {
  state = {
    projects: [], //i get it from api on Didmount();
    showProjects: true //hardcoded var to shows projects list
  };

  componentDidMount() {
      //i get projects here from axios and my api, it works ok!
  }

  render() {
    return (
      <div>
        <Navbar />
        {this.state.showProjects && (
          <ProjectsList projects={this.state.projects} />
        )}
      </div>
    );
  }
}

export default App;

如您所见，我可以通过硬编码的 showprojects bool 值来操纵我的 ProjectLists 可见性。工作正常。当 false 时它不可见，当 true 时它可见，非常简单。

如何将该 showProjects 变量传输到我的 Navbar.js 组件并通过单击导航栏项目来触发它？

我的Navbar.js:

import React, { Component } from "react";
import { Navbar } from "react-bootstrap";

class NavBar extends Component {
  render() {
    return (
      <Navbar inverse collapseOnSelect>
        <Navbar.Collapse>
          <Navbar.Form>
            <Navbar.Brand> Projects </Navbar.Brand> //button click here, how to?
          </Navbar.Form>         
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default NavBar;

View 看起来像这样:

我希望可以选择单击导航栏上的 Projects，然后我的 ShowProjects 将设置为 true 并且项目将可见。如何做到这一点？

感谢您的建议!

编辑:

如果有帮助，我的ProjectsList.js组件:

import React, { Component } from "react";
import Project from "./Project";
import { ListGroup } from "react-bootstrap";

class ProjectsList extends Component {
  render() {
    return (
      <ListGroup>
        {this.props.projects.map(project => {
          return <Project project={project} key={project.id} />;
        })}
      </ListGroup>
    );
  }
}

export default ProjectsList;

Answer 1

首先在父组件中创建状态改变函数:

toggleShowProjects = () => {
    this.setState(prevState => ({
      showProjects: !prevState.showProjects
    }))
  }

然后将函数传递给您的导航栏组件:

import React, { Component } from "react";
import Navbar from "./Components/Navbar";
import "./Styles/App.css";
import ProjectsList from "./Components/Projects/ProjectsList";
import axios from "axios";

class App extends Component {
  state = {
    projects: [], //i get it from api on Didmount();
    showProjects: true //hardcoded var to shows projects list
  };

  componentDidMount() {
      //i get projects here from axios and my api, it works ok!
  }
toggleShowProjects = () => {
        this.setState(prevState => ({
          showProjects: !prevState.showProjects
        }))
      }

  render() {
    return (
      <div>
        <Navbar 
        toggleProjects={this.toggleShowProjects} />
        {this.state.showProjects && (
          <ProjectsList  
          projects={this.state.projects} />
        )}
      </div>
    );
  }
}

export default App;