Question

我想更改状态不同的js，但是我不能，我有一个带有react-burger-menu的sidebar.js

我想在header.js中调用并更改toggleMenu状态

当我单击菜单链接时，我想切换react-burger-menu但使用不同的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包含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>    
  );
  }
}

感谢帮助

注意：我有一个app.js所有文件导入。我想在header.js

中运行toggleMenu

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（）未绑定到构造函数。

high performance mysql

尝试：

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语义结构提供了许多基础功能，并大大提高了可访问性。

此外，删除箭头函数并将引用传递给该函数，而不是返回值。这样一来，react不会立即调用该函数，而是存储要在click事件后执行的函数引用。

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

希望这会有所帮助！

如何调用不同状态的js

2 个答案: