我怎么能叫反应状态不同的js

Question

i want to change state different js but i can not , i have a sidebar.js with react-burger-menu

i want to call and change toggleMenu state in header.js

When I click the menu link, i want to toggle react-burger-menu but different js. this is not working.

sidebar.js

 import React from "react";
    import PropTypes from "prop-types";
    import { reveal as Menu } from "react-burger-menu";
    import * as FontAwesome from "react-icons/lib/fa";

    export default class SidebarMenu extends React.Component {
      constructor (props) {
        super(props)
        this.state = {
          menuOpen: false
        }
      }

      handleStateChange (state) {
        this.setState({menuOpen: state.isOpen})
      }

      closeMenu () {
        this.setState({menuOpen: false})
      }

      toggleMenu () {
        this.setState({menuOpen: !this.state.menuOpen})
      }

      render () {
        return (
          <div>
            <Menu
              isOpen={this.state.menuOpen}
              onStateChange={(state) => this.handleStateChange(state)}
            >
             // menu content 

            </Menu>
          </div>
          </div>
        )
      }
    }

header.js have link for react-burger-menu

import React from 'react';
import PropTypes from 'prop-types';
import SidebarMenu from "../SidebarMenu";

export default class Header_Video extends React.Component {


  render() {
    return (   
      <Container>
        <Row>
          <Col md={5} sm={12} xs={12} className="text-left mobile-right">
            <div className="bar__module">

              <a onClick={this.toggleMenu}>Menu</a>
            </div>
          </Col>     
        </Row>
      </Container>    
  );
  }
}

thanks for help

note: i have a app.js all files import. I want to run toggleMenu in header.js

app.js

const TemplateWrapper = ({ children }) => (
  <div id="outer-container">
    <SidebarMenu />
    <main id="page-wrap" className="page-wrap">
      <HeaderVideo /> {children()}
      <Footer />
    </main>
  </div>
);

Answer 1

menuOpen should be in a parent state of both components.

Example:

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      menuOpen: false
    }
  }

  closeMenu = () => {
    this.setState({menuOpen: false})
  }

  toggleMenu = () => {
    this.setState({menuOpen: !this.state.menuOpen})
  }

  render() {
    return (
      <div>
        <SidebarMenu isMenuOpen={this.state.menuOpen} toggleMenu={this.toggleMenu} />
        <Header toggleMenu={this.toggleMenu} />
      </div>
    )
  }
}

Answer 2

You may have further errors beyond just this, but the glaring error to me is that toggleMenu() is not bound to the constructor.

https://reactjs.org/docs/handling-events.html

try:

import React from "react";
import PropTypes from "prop-types";
import { reveal as Menu } from "react-burger-menu";
import * as FontAwesome from "react-icons/lib/fa";

export default class SidebarMenu extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      menuOpen: false
    }
    this.toggleMenu = this.toggleMenu.bind(this);
    // the above statement binds the function to the object constructor
  }

  handleStateChange (state) {
    this.setState({menuOpen: state.isOpen})
  }

  closeMenu () {
    this.setState({menuOpen: false})
  }

  toggleMenu () {
    this.setState({menuOpen: !this.state.menuOpen})
  }

  render () {
    return (
      <div>
        <Menu
          isOpen={this.state.menuOpen}
          onStateChange={(state) => this.handleStateChange(state)}
        >
         // menu content 

        </Menu>
      </div>
      </div>
    )
  }
}

You'll also want to use an HTML5 button tag instead of a link tag, the correct HTML semantic structure provides a bunch of underlying features and greatly improves accessibility out of the box.

Also, remove the arrow function and pass a reference to the function, not the returned value. This is so react doesn't call the function immediately but stores the function reference to execute upon the click event.

<button onClick={this.toggleMenu}>Menu</button>
// instead of
<a onClick={() => this.toggleMenu()}>Menu</a>

Hope this helps!