Javascript 功能在主页上运行，但在第二页上停止

Question

我正在尝试使用 ReactJS 创建一个网站。在我的网站中，主页上有一个切片按钮；

当您单击切片按钮时，每一面都会显示不同的图像。

我还为切片按钮添加了指向菜单栏的链接（我将调用左-右），因此当您单击链接时，首先会转到主页的一部分，然后它会移动切片按钮并显示图像。

当我在主页上时，链接没有任何问题，但问题是；我对所有页面都使用相同的菜单栏，当我在不同页面的菜单中单击 Left 和 Right 右链接时，它会停止。

链接打开主页，但停留在主页的开头。

更新2：虽然问题不在于Toggle button，但我想在主页添加切换功能，您可以看到所有内容。

注意：我删除了toggle button，但链接不起作用（是的，当我删除该功能时我看不到按钮，但是当我单击菜单中的链接时，页面没有链接到放置的按钮的确切部分主页所以我仍然有同样的问题。）

这是我在 main 中的 ChangeViewButtonClick 函数；

import React, { Component } from "react";


class Main extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      view: "Left"
    };
    this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
    this.ChangeViewToggle = this.ChangeViewToggle.bind(this);
  }

   togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }

  ChangeViewToggle() {
    if (this.refs.toggle.state.checked === true) {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = false
    } else  {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = true
    }
  }
  ChangeViewButtonClick(view) {
    if (view === "Left") {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = true
    } else if (view === "Right") {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = false
    }
  }

  render(){
    return(
      <div>
        <h1> 
           <footer className="togglefooter">
            <label>
                  &nbsp;
                  <span style={{ color: "black", fontWeight: "normal" }}>
                   Left
                    &nbsp;
                  </span>
                  <Toggle
                    id="toggle"
                    ref="toggle"
                    defaultChecked={this.state.view}
                    icons={false}
                    onChange={() => this.ChangeViewToggle()}
                  />
                  <span style={{ color: "black", fontWeight: "normal" }}>
                    &nbsp;
                    Right
                  </span>
                </label>
              </footer>
        </h1>
      </div>
    );
  }
}

这是我的菜单页；

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, NavLink} from 'reactstrap';
import { HashLink as Link } from 'react-router-hash-link';


class Menu extends React.Component {  
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return(
      <Navbar light expand="md">
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
          <nav className="nav">
            <ul className="nav__menu">
              <li className="nav__menu-item">
                <NavLink to="#" tag= {Link} >
                  Images
                </NavLink>
                <Image_SubMenu ChangeViewButtonClick{this.props.ChangeViewButtonClick}/>
              </li>
              <li className="nav__menu-item">
                <NavLink tag={Link} to="/main#something">
                  Something
                </NavLink>
              </li>
            </ul>
          </nav>
        </Collapse>
      </Navbar>
    );
  }
}

class Image_SubMenu extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ul className="nav__submenu">
        <li className="nav__submenu-item ">
          <NavLink to="/main#map" tag={Link} onClick={evt => this.props.ChangeViewButtonClick("Left")}>
            Left Image
          </NavLink> 
        </li>
        <li className="nav__submenu-item ">
          <NavLink to="/main#map" tag={Link} onClick={evt => this.props.ChangeViewButtonClick("Right")} >
            Right Image
          </NavLink>
        </li>
      </ul>
    )
  }
}

export default Menu;

如果我点击网站上任何地方的链接然后显示Left 或Right 图像，我该如何解决这个问题

我发现了一些关于delegated events 的文章，不幸的是我无法弄清楚。

提前致谢

请注意，这只是代码的一部分，只需粘贴您需要的部分，如果我遗漏了什么，请告诉我，这样可能会有一些拼写错误。

更新：我想在这里添加我的另外两个页面，因为我分享的信息可能不够。

我正在尝试单击 Menu 内的链接，但我遇到了问题

关于页面：

import React from "react";
import ReactGA from 'react-ga'
//Import components
import Footer from "./components/Footer.js";
import Menu from "./components/Menu.js";

function About(props) {  
  return ( 
    <div>
      <div className="bgded overlay">
        {/* Menu Component */}
        <Menu ChangeViewButtonClick={props.ChangeViewButtonClick}/>
      </div>
      {/* Start of Project Aims */}
      <a id ="aims" />
      <div className="wrapper row3">
        <main className="hoc container clear" style={{ paddingTop: "30px" }}>
          <article className="one_third first" style={{ width: "100%" }}>
            <h4 className="font-x2 font-x3">
              Something about project
            </h4>
            <p>Something is here too..</p>
          </article>
          <div className="clear" />
        </main>
      </div>
      {/* Footer Component */}
      <Footer />
    </div>
  );
}

export default About;

报告页面：

import React, { Component } from "react";
import ReactGA from 'react-ga';
import ReactDependentScript from 'react-dependent-script';
import Footer from "./components/Footer.js";
import Menu from "./components/Menu.js"
//Import PNG Image
//import { domain } from "./config.json";
import GraphHover from "./components/GraphHover.js";

class report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayGraph: "none",
      graphTitle: null,
      graphPreview: null,
      graphHoverLeft: "0",
      previewImages: null,
    };
    this._onMouseLeave = this._onMouseLeave.bind(this);
    this.DisplayHoverGraph = this.DisplayHoverGraph.bind(this);
  }

  _onMouseLeave(evt) {
    this.setState({ displayGraph: "none" });
  }

  DisplayHoverGraph(input, image, evt) {
    //Disable hover effect if on a mobile device
    if (!this.props.isMobileDevice) {
      this.setState({
        graphTitle: input,
        previewImage: image,
        displayGraph: "inline"
      });

      if (evt.clientX < window.screen.width / 2) {
        this.setState({ graphHoverLeft: "1200px" });
      } else {
        this.setState({ graphHoverLeft: "0" });
      }
    }
  }

  componentDidMount() {
    console.log(window.test)
  }

  render() {
    return (
      <div>
        <GraphHover
          position="fixed"
          top={this.state.graphHoverTop}
          left={this.state.graphHoverLeft}
          displayPreview={true}
          display={this.state.displayGraph}
          graphTitle={this.state.graphTitle}
          previewImage={this.state.previewImage}
          graphHeadingSize={this.state.graphHeadingSize}
          width={this.state.graphHoverWidth}
          height={this.state.graphHoverHeight}
        />
        <div className="bgded overlay">
          {/* Menu */}
          <Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />
        </div>
        <div className="wrapper row3">
          <a id="sumary" />
          <main className="hoc container clear" style={{ paddingTop: "30px" }}>
            <div className="clear" />
          </main>
        </div>
        <Footer />
      </div>
    );
  }
}

export default report;

Answer 1

您在Main 组件中有ChangeViewButtonClick 函数，但您没有将此函数传递给Menu 组件

import React, { Component } from "react";
import Menu from './Menu'

class Main extends React.Component{

constructor(props) {
    super(props);
    this.state = {
      view: "Left"
   };
 this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
 }

    ChangeViewButtonClick(view) {
    if (view === "Left") {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = true
    } else if (view === "Right") {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = false
    }
  }

render(){
return(
    <div>
        <h1>Main Page is Here </h1>
        <Menu onChangeViewButtonClick={this.ChangeViewButtonClick} />
    </div>
  );
 }
}

在菜单组件中，您可以接收onChangeViewButtonClick 属性并像this.props.onChangeViewButtonClick('view') 一样调用它

Answer 2

您需要通过父类（在您的情况下为 Main ）将道具 ChangeViewButtonClick 传递给子类（在您的情况下为类 About 或类 Report ）。

所以你的结构应该是这样的 -
主要
----关于
- - 报告。

我之所以提到 about 和 report 将是您的 Main 类的子类，因为它们正在访问像 <Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} /> 这样的 prop 函数，其中 this.props.ChangeViewButtonClick 应该可用于报告和 about 页面。

注意：您可能需要添加导航逻辑来加载相应的页面。下面我给个简单的sn-p

import React, { Component } from "react";
import Menu from './Menu'
import report from "./report"
import about from "./about"

class Main extends React.Component{

constructor(props) {
    super(props);
    this.state = {
      view: "Left"
   };
 this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
 }

    ChangeViewButtonClick(view) {
    if (view === "Left") {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = true
    } else if (view === "Right") {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = false
    }
  }

render(){
return(
    <div>
        <h1>Main Page is Here </h1>
        // Some navigation logic between the pages below
        <report onChangeViewButtonClick={this.ChangeViewButtonClick} />
        <about onChangeViewButtonClick={this.ChangeViewButtonClick} />

    </div>
  );
 }
}