Как я могу назвать реагировать состояние различных JS

Question

Я хочу изменить состояние другого js, но не могу, у меня есть sidebar.js с response-burger-menu

я хочу вызвать и изменить состояние toggleMenu в header.js

Когда я нажимаю на ссылку меню, я хочу переключать меню реакции-бургера, но разные js. Это не работает.

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 есть ссылка для меню реакции-бургера

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>    
  );
  }
}

спасибо за помощь

примечание: у меня есть app.js для импорта всех файлов. Я хочу запустить toggleMenu в 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 должен находиться в родительском состоянии обоих компонентов.

Пример:

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

У вас могут быть и другие ошибки, кроме этого, но явная ошибка для меня заключается в том, что toggleMenu () не привязан к конструктору.

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

попробовать:

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>
    )
  }
}

Вы также захотите использовать тег кнопки HTML5 вместо тега ссылки, правильная семантическая структура HTML обеспечивает множество базовых функций и значительно улучшает доступность из коробки.

Кроме того, удалите функцию стрелки и передайте ссылку на функцию, а не возвращаемое значение. Это так, что реакция не вызывает функцию немедленно, но сохраняет ссылку на функцию для выполнения при событии щелчка.

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

Надеюсь, это поможет!