Question

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

单击“切片”按钮时，每侧显示不同的图像。

我还将切片按钮的链接也添加到菜单栏（我将称为“左-右”），因此，当您单击链接时，首先转到主页的该部分，然后它会移动切片按钮，显示图像。

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

这些链接会打开主页，但会保留在主页的开头。

更新2：尽管问题不是Toggle button引起的，但我想在主页上添加切换功能，以便您查看全部内容。

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

这是我的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传递给子类（在您的情况下为About或Report类）。

所以您的结构将是这样-
主要
----关于
- - 报告。

我之所以提到about和report是您的Main类的子级，是因为它们正在访问诸如<Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />这样的prop函数，其中this.props.ChangeViewButtonClickClick应该可用于报告和about页面。 / 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>
  );
 }
}

Answer 2

您在ChangeViewButtonClick组件中拥有Main函数，但没有将此函数传递给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')这样在操作中调用它

Javascript函数在主页上起作用，但在第二页上停止

2 个答案: