将函数作为道具传递

Question

I have recently started a project and now I am trying to pass an onClick function as a prop of a Menubar so when I click on the image in Taskbar it displays the Menubar content

import React from 'react'
import "./MenuBar.css" 
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

 function MenuBar() {
    
  const [open, setOpen] = React.useState(true);
  const [close, setClose]= React.useState(false)

const TaskBar=()=>{
  const [open, setOpen] = React.useState(true);

   
  
  const handleOpen = () => {
    setOpen(true);
  };

  
  const handleClose = () => {
    setOpen(false);
  };

  



return (   
 
     <div className="taskbar">

            <img onPress={() => handleOpen(true)}  className="menu" 
            <MenuBar onPress={() => handleClose(false)}/>

Answer 1

I think you want to pass the function, handleOpen , not the result of executing the function, handleOpen() . Does this work?

<img onClick={handleOpen} className="menu" />

Update

Based on your edited code, I think this is what you are trying to do:

import React from 'react'
import "./MenuBar.css" 
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function MenuBar(props) {
  return <div className='my-menu-bar-content'>
    <span>MENU</span>
    <p>This is some sample menu content.</p>
    <button onClick={props.closeMenu}>Close</button>
  </div>
}

function TaskBar(props){
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  
  function openMenu(){
    setIsMenuOpen(true)
  }
  function closeMenu(){
    setIsMenuOpen(false)
  }
  return (   
    <div className="taskbar">
      <img onClick={openMenu} className="menu" />
      {isMenuOpen ? <MenuBar closeMenu={closeMenu} />: null}
    </div>
  )
}

Answer 2

In your case <img onClick={this.handleOpen()} className="menu" will looped

You should pass the only function without invoke it like this -> <img onClick={this.handleOpen} className="menu"

Answer 3

• handleOpen function needs some modification, I think. const handleOpen = () => setOpen(!open);
• And rest of the part should be something like this. <img onClick={this.handleOpen} ...