React JS 將點擊事件傳遞給另一個組件

Question

我在 Navbar 組件中有 Avatar 和 Menu 組件。 我想通過單擊 Avatar 組件從 Menu 組件觸發 function。 我的問題是如何將 clickEvent 從頭像傳遞到菜單組件。

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

Answer 1

你不需要傳遞點擊事件，你只需要使用AppBar將anchorEl state 移動到你的組件，並將anchorEl和onClose作為道具傳遞給DropDownMenu ：

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

我寫了一個庫material-ui-popup-state ，在這樣的情況下使用起來不太麻煩：

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

Answer 2

訣竅是將 function 放在父組件中，並且都是子組件，並將其作為道具傳遞下去，這樣它就可以成為共享的 function。

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

Answer 3

您有ToolBar組件，它是您的avatar和menudropdown組件的父級。 放置那些 handleClick、handleClose 和const [anchorEl, setAnchorEl] = React.useState(null); 在這些孩子的父組件中。

接下來將 handleClose 函數傳遞給dropDownMenu組件，並將 handleClick 作為道具傳遞給Avatar組件。 您還應該將 state 傳遞給基於它的操作的那些組件，在這種情況下傳遞給menuDropDown組件，因為我看到他需要這個 state 數據。