将 OnClick 事件从组件传递到其他组件

Question

Lets say there is 2 component header.js and layout.js

// header.js

import React from 'react';

class Header extends React.Component {

   state = { showMenu: false }

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

   render() {
        const menuActive = this.state.showMenu ? 'active' : '';
        const buttonActive = this.state.showMenu ? 'active' : '';

        return (

            <button className={`button ${buttonActive}`} onClick={this.toggleMenu}>
              Some Button
            </button>
            <div className={`menu ${menuActive}`}>
                ...
            </div>
        )
   }
}

export default Header

// layout.js

import React from 'react';
import Header from './header';

const Layout = (props) => {
  <div className="foo"> // <==== need to add class from onClick event in header.js
     <Header/>
     <main>
       {props.children}
     </main>
  </div>
}

export default Layout

motivation

As you can see I have managed to create onClick event in the header.js but in the other hand i also need to pass the event to layout.js so i can add some additional class. Maybe this can be done using props , unfortunately since i new in React i have no idea how to implement it into the code

Answer 1

I have a simple solution.

You can declare the state and function on the parent component.

in your code, you just declare them on Layout .

---

header.js

import React from 'react';

class Header extends React.Component {

   /* state = { showMenu: false }
   toggleMenu = () => {
        this.setState({
            showMenu: !this.state.showMenu
        })
   }*/

   render() {
        // const menuActive = this.state.showMenu ? 'active' : '';
        // const buttonActive = this.state.showMenu ? 'active' : '';
        const menuActive = this.props.showMenu ? 'active' : '';
        const buttonActive = this.props.showMenu ? 'active' : '';
        return (

            <button className={`button ${buttonActive}`} onClick={this.props.toggle}>
              Some Button
            </button>
            <div className={`menu ${menuActive}`}>
                ...
            </div>
        )
   }
}

export default Header

layout.js

import React from 'react';
import Header from './header';

const Layout = (props) => { 
  const [showMenu, setShowMenu] = React.useState(false);
  const toggle = () => setShowMenu(!showMenu); 
return(
  <div className={`foo ${showMenu? 'active':''}`}> // <==== need to add class from onClick event in header.js
     <Header showMenu={showMenu} toggle={toggle}/>
     <main>
       {props.children}
     </main>
  </div>
)
}    
export default Layout

And, there're some other options

ie Redux , Mobx ...

If you are going to build a complicated and huge application, you should use one of them.

Answer 2

You should control the state in the Layout component, and pass the toggleMenu callback as a prop to the Header component:

// header.js
import React from 'react';

const Header = ({ menuActive, toggleMenu}) => {
  return (
    <button className={`button ${menuActive}`} onClick={toggleMenu}>
      Some Button
    </button>
    <div className={`menu ${menuActive}`}>
      ...
    </div>
  )
}

export default Header

// layout.js

import React from 'react';
import Header from './header';

class Layout extends React.Component {
  state = { showMenu: false }

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

  render() {
    const menuActive = this.state.showMenu ? 'active' : '';

    return (
      <div className={`foo ${menuActive}`}>
       <Header menuActive={menuActive} toggleMenu={this.toggleMenu} />
       <main>
         {this.props.children}
       </main>
      </div>
    )
  }
}
export default Layout