javascript - React JS pass click event to another component - Stack Overflow

admin管理员组

文章数量:1431406

I have Avatar and Menu ponents inside the Navbar ponent. I want to trigger the function from Menu ponent by clicking on Avatar ponent. My question is how to pass a clickEvent from avatar to Menu ponent.

<AppBar position="sticky" className={classes.navBarStyle}>
        <Toolbar>
            <Avatar alt="" className={classes.userAvatar} src="./avatar.jpg"/>
            <DropDownMenu/>
        </Toolbar>
    </AppBar>

I have Avatar and Menu ponents inside the Navbar ponent. I want to trigger the function from Menu ponent by clicking on Avatar ponent. My question is how to pass a clickEvent from avatar to Menu ponent.

<AppBar position="sticky" className={classes.navBarStyle}>
        <Toolbar>
            <Avatar alt="" className={classes.userAvatar} src="./avatar.jpg"/>
            <DropDownMenu/>
        </Toolbar>
    </AppBar>

function DropDownMenu() {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
      };

    const handleClose = () => {
      setAnchorEl(null);
    };
  
    return (
      <div>
        <Menu
          id="fade-menu"
          anchorEl={anchorEl}
          keepMounted
          open={open}
          onClose={handleClose}
          TransitionComponent={Fade}
        >
          <MenuItem onClick={handleClose}>Profile</MenuItem>
          <MenuItem onClick={handleClose}>My account</MenuItem>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </Menu>
      </div>
    );
}

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jan 20, 2021 at 18:32 Andy 8,78255 gold badges5959 silver badges6868 bronze badges asked Jan 20, 2021 at 18:09 LanGuuLanGuu 3322 silver badges33 bronze badges 1

• I'd suggest changing the title to "how to control a Material-UI Menu from another ponent", I think it would be more helpful for other users that way – Andy Commented Jan 20, 2021 at 18:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You don't need to pass the click event around, you just need to move the anchorEl state to your ponent with AppBar and pass anchorEl and onClose to DropDownMenu as props:

function MainAppBar() {
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
      };

    const handleClose = () => {
      setAnchorEl(null);
    };

    <AppBar position="sticky" className={classes.navBarStyle}>
        <Toolbar>
            <Avatar alt="" className={classes.userAvatar} src="./avatar.jpg" onClick={handleClick} />
            <DropDownMenu anchorEl={anchorEl} onClose={handleClose} />
        </Toolbar>
    </AppBar>
}

function DropDownMenu({ anchorEl, onClose }) {
    const open = Boolean(anchorEl);

    return (
      <div>
        <Menu
          id="fade-menu"
          anchorEl={anchorEl}
          keepMounted
          open={open}
          onClose={onClose}
          TransitionComponent={Fade}
        >
          <MenuItem onClick={handleClose}>Profile</MenuItem>
          <MenuItem onClick={handleClose}>My account</MenuItem>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </Menu>
      </div>
    );
}

I wrote a library, material-ui-popup-state, that is less cumbersome to use for cases like this:

import {bindTrigger, bindMenu, usePopupState} from 'material-ui-popup-state/hooks';

function MainAppBar() {
    const popupState = usePopupState({ variant: 'popover', popupId: 'fade-menu' });

    <AppBar position="sticky" className={classes.navBarStyle}>
        <Toolbar>
            <Avatar {...bindTrigger(popupState)} alt="" className={classes.userAvatar} src="./avatar.jpg" />
            <DropDownMenu popupState={popupState} />
        </Toolbar>
    </AppBar>
}

function DropDownMenu({ popupState }) {
    return (
      <div>
        <Menu
          {...bindMenu(popupState)}
          keepMounted
          TransitionComponent={Fade}
        >
          <MenuItem onClick={popupState.close}>Profile</MenuItem>
          <MenuItem onClick={popupState.close}>My account</MenuItem>
          <MenuItem onClick={popupState.close}>Logout</MenuItem>
        </Menu>
      </div>
    );
}

The trick is to place the function in the parent ponent that and are both children of, and pass it down as a prop, that way it can be a shared function.

https://reactjs/docs/faq-functions.html

You have ToolBar ponent which is parent of your avatar and menudropdown ponents. Place those handleClick, handleClose and const [anchorEl, setAnchorEl] = React.useState(null); in parent ponent of those childs.

Next pass handleClose funtion to dropDownMenu ponent and handleClick to Avatar ponent as props. You should also pass state to those ponents who base their actions on it, in this case to menuDropDownponent because i see that he need this state data.

本文标签： javascriptReact JS pass click event to another componentStack Overflow