时间戳

首页 > 解决方案 > 如何使 NavBar 中的 onClick 事件做出反应？

javascript - 如何使 NavBar 中的 onClick 事件做出反应？

问题描述

我正在做我的第一个反应项目。我是 JS、HTML、CSS 甚至网络应用程序编程的新手。

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

我有我的主要默认组件，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;

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

如何将该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;

视图如下所示：

在此处输入图像描述

我希望可以选择单击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;

标签： javascriptreactjsreact-bootstrap

解决方案

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

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;

推荐阅读