单击按钮时加载组件

e.T55

当在导航栏组件上按下按钮并将其加载到主页组件时,我将如何加载组件。我想在主页上加载一个组件。我正在使用 react route.Navbar 组件有一个配置文件链接,该链接转到具有表单的配置文件组件。

导航栏组件

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import jwt_decode from "jwt-decode";

class Navbar extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: ""
    };
  }
  componentDidMount() {
    const token = localStorage.usertoken;
    const decoded = jwt_decode(token);
    this.setState({
      name: decoded.name,
      email: decoded.email
    });
  }
  logOut(event) {
    event.preventDefault();
    localStorage.removeItem("usertoken");
    this.props.history.push("/");
  }
  render() {
    return (
      // const loginRegLink = (
      <div>
        <ul
          style={navBarStyle}
          id="sidenav-1"
          className="sidenav sidenav-fixed"
        >
          <li>
            <Link to={"/profile"}>
              <i class="material-icons ">person</i>
            </Link>
          </li>

          <li>
            <Link to={"/searchCourses"}>
              <i class="material-icons">search</i>
            </Link>
          </li>
          <li>
            <a href="" onClick={this.logOut.bind(this)}>
              <i class="fas fa-sign-out-alt" />
            </a>
          </li>
        </ul>
      </div>
    );
  }
}

主页组件

  class Homepage extends Component {
  componentDidMount() {
    document.title = "Dashboard";
  }
  render() {
    return (
      <div>
        <Navbar />
        <div className="container">
          <div>
            <h3>Dashboard</h3>
            <hr />
          </div>
          <div className="col" />

        </div>
      </div>
    );
  }
}
export default Homepage;
维克托·马切伊

将回调函数传递给 Navbar 并在单击 Navbar 链接时调用她。

      class Homepage extends Component {
      componentDidMount() {
        document.title = "Dashboard";
      }
    handleLinkClick()=>{
      //Function which you want to use in Navbar to select the right thing to render.You can use it in Navbar now. 
      //You should attach some value to it so you can determine which link was pressed like this: this.props.onLinkClick(value)
    }
      render() {
        return (
          <div>
            <Navbar onLinkClick={this.handleLinkClick} />
            <div className="container">
              <div>
                <h3>Dashboard</h3>
                <hr />
              </div>
              <div className="col" />

            </div>
          </div>
        );
      }
    }
    export default Homepage;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在单击按钮时将组件动态添加到JDialog

来自分类Dev

Bootstrap jQuery Modal在按钮单击时未加载

来自分类Dev

用户单击按钮时输入的输入字段的HTML加载数

来自分类Dev

当单击按钮时,隐藏已经显示页面加载的段落

来自分类Dev

Angular 2-再次单击routerLink时重新加载组件

来自分类Dev

实施“加载更多”按钮以在单击时加载更多元素

来自分类Dev

在页面加载时自动单击单选按钮

来自分类Dev

如何在加载此React组件时触发此功能,而不需要单击按钮?

来自分类Dev

单击页面的“提交”按钮时组件如何知道?

来自分类Dev

在每个按钮上单击角度后加载组件

来自分类Dev

在按钮上加载新组件单击在ReactJs中?

来自分类Dev

单击按钮时如何添加无限组件

来自分类Dev

单击按钮时显示加载程序

来自分类Dev

在Vue JS中加载组件时默认单击按钮

来自分类Dev

单击父组件上的按钮时如何将数据从子组件传递到父组件

来自分类Dev

单击按钮时刷新Ajax加载的页面

来自分类Dev

单击按钮时再次加载android viewtreeObserver

来自分类Dev

在React Native中单击按钮时如何渲染组件

来自分类Dev

实施“加载更多”按钮以在单击时加载更多元素

来自分类Dev

在页面加载时自动单击单选按钮

来自分类Dev

单击按钮时更改reactjs中的组件

来自分类Dev

单击按钮时重置Ember组件

来自分类Dev

按钮在单击时加载索引文件

来自分类Dev

单击按钮时未呈现组件 - ReactJS

来自分类Dev

如何仅在单击按钮时加载 iframe

来自分类Dev

为什么单击按钮时未调用组件函数

来自分类Dev

如何通过单击按钮 angular 4 加载子组件

来自分类Dev

单击按钮时显示 2 个组件中的 1 个

来自分类Dev

如何在单击按钮时以角度有条件地加载组件

Related 相关文章

  1. 1

    在单击按钮时将组件动态添加到JDialog

  2. 2

    Bootstrap jQuery Modal在按钮单击时未加载

  3. 3

    用户单击按钮时输入的输入字段的HTML加载数

  4. 4

    当单击按钮时,隐藏已经显示页面加载的段落

  5. 5

    Angular 2-再次单击routerLink时重新加载组件

  6. 6

    实施“加载更多”按钮以在单击时加载更多元素

  7. 7

    在页面加载时自动单击单选按钮

  8. 8

    如何在加载此React组件时触发此功能,而不需要单击按钮?

  9. 9

    单击页面的“提交”按钮时组件如何知道?

  10. 10

    在每个按钮上单击角度后加载组件

  11. 11

    在按钮上加载新组件单击在ReactJs中?

  12. 12

    单击按钮时如何添加无限组件

  13. 13

    单击按钮时显示加载程序

  14. 14

    在Vue JS中加载组件时默认单击按钮

  15. 15

    单击父组件上的按钮时如何将数据从子组件传递到父组件

  16. 16

    单击按钮时刷新Ajax加载的页面

  17. 17

    单击按钮时再次加载android viewtreeObserver

  18. 18

    在React Native中单击按钮时如何渲染组件

  19. 19

    实施“加载更多”按钮以在单击时加载更多元素

  20. 20

    在页面加载时自动单击单选按钮

  21. 21

    单击按钮时更改reactjs中的组件

  22. 22

    单击按钮时重置Ember组件

  23. 23

    按钮在单击时加载索引文件

  24. 24

    单击按钮时未呈现组件 - ReactJS

  25. 25

    如何仅在单击按钮时加载 iframe

  26. 26

    为什么单击按钮时未调用组件函数

  27. 27

    如何通过单击按钮 angular 4 加载子组件

  28. 28

    单击按钮时显示 2 个组件中的 1 个

  29. 29

    如何在单击按钮时以角度有条件地加载组件

热门标签

归档