javascript - Popover 材质 ui 的 event.currentTarget 问题

Question

import React, { memo, useState, useCallback, useMemo } from 'react'
import PropTypes from 'prop-types'
import * as qs from 'qs'

import { ID_DEPENDENT_PAGES } from 'constants/sidebar'

import { isData, generateQuickGuid } from 'utils/helpers'

import Popover from '@material-ui/core/Popover'
import ExpansionPanel from '@material-ui/core/ExpansionPanel'
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'

import withStyles from 'hoc/withStyles'
import withRouter from 'hoc/withRouter'
import compose from 'hoc/compose'
import Buttons from './Buttons'
import styles from '../styles'

const Expansion = ({
  menuEntity: { extensionPanel },
  menuState,
  classes,
  anchorOrigin,
  transformOrigin,
  location,
  history
}) => {
  const [anchorEl, setAnchorEl] = useState(null)

  const {
    params: { id, name, isExpanded, subMenu },
    pathname
  } = location

  const onClickSubMenu = useCallback(
    subMenuValue => {
      const query = {
        name,
        ...(id && { id }),
        ...(subMenuValue && { subMenu: subMenuValue }),
        isExpanded: menuState ? !JSON.parse(isExpanded) : true
      }

      history.push({
        pathname,
        search: qs.stringify(query)
      })
    },
    [id, name, pathname, menuState, isExpanded, history]
  )

  const handleOpen = useCallback(
    ({ name: nameValue, subMenus }) => {
      if (!id && ID_DEPENDENT_PAGES.find(entity => nameValue === entity)) return

      const query = {
        name: nameValue,
        ...(id && { id }),
        ...(isData(subMenus) && {
          subMenu: subMenus.find(entity => entity.default).pathname
        }),
        isExpanded: menuState ? !JSON.parse(isExpanded) : true
      }

      history.push({
        pathname,
        search: qs.stringify(query)
      })
    },
    [id, menuState, isExpanded, history, pathname]
  )

  const handleClose = useCallback(() => {
    const query = {
      name,
      isExpanded: false,
      ...(id && { id }),
      ...(subMenu && { subMenu })
    }

    history.push({
      pathname,
      search: qs.stringify(query)
    })

    setAnchorEl(null)
  }, [pathname, name, id, subMenu, history])

  const contentClassName = useMemo(() => {
    return !menuState ? classes.expansion : classes.expansionBig
  }, [classes.expansion, classes.expansionBig, menuState])

  return extensionPanel.map(data => {
    const Component = data.component
    const isPopoverOpen = Boolean(
      menuState && name === data.name && (isExpanded && JSON.parse(isExpanded))
    )

    return (
      <div key={generateQuickGuid()}>
        {menuState && isData(data.subMenus) && (
          <Popover
            id="popover"
            anchorEl={anchorEl}
            onClose={handleClose}
            open={isPopoverOpen}
            anchorOrigin={anchorOrigin}
            transformOrigin={transformOrigin}
          >
            <div className={classes.popover}>
              {data && (
                <Buttons
                  data={data}
                  onClick={onClickSubMenu}
                  subMenu={subMenu}
                />
              )}
            </div>
          </Popover>
        )}
        <ExpansionPanel
          expanded={
            name === data.name && (isExpanded && JSON.parse(isExpanded))
          }
          onChange={event => {
            setAnchorEl(event.currentTarget)
            handleOpen(data)
          }}
          classes={{
            root: classes.expansionPanel,
            rounded: classes.rounded,
            expanded: classes.expanded
          }}
        >
          <ExpansionPanelSummary
            classes={{
              content: contentClassName,
              root: classes.summaryRoot
            }}
          >
            <Component menuState={menuState} open={name === data.name} />
          </ExpansionPanelSummary>
          {!menuState && isExpanded && (
            <ExpansionPanelDetails
              classes={{
                root: classes.rootDetails
              }}
            >
              <Buttons data={data} onClick={onClickSubMenu} subMenu={subMenu} />
            </ExpansionPanelDetails>
          )}
        </ExpansionPanel>
      </div>
    )
  })
}

Expansion.defaultProps = {
  anchorOrigin: {
    vertical: 'top',
    horizontal: 'right'
  },
  transformOrigin: {
    vertical: 'top',
    horizontal: 'left'
  }
}

Expansion.propTypes = {
  menuEntity: PropTypes.shape({
    extensionPanel: PropTypes.instanceOf(Array)
  }).isRequired,
  menuState: PropTypes.bool.isRequired,

  // defaultProps
  anchorOrigin: PropTypes.instanceOf(Object).isRequired,
  transformOrigin: PropTypes.instanceOf(Object).isRequired
}

export default compose(
  withStyles(styles),
  withRouter(),
  memo
)(Expansion)

在这个片段中，我想得到event.currentTarget，但是有一些问题，为什么会发生？我发现这个问题可能与strict mode，但我什至没有在我的代码中选择它。您可以在此处找到有关 popover 的信息https://material-ui.com/components/popover/。您还可以onChange在此处找到附加操作的元素https://material-ui.com/api/expansion-panel/。如果您需要更多信息，请告诉我

   onChange={event => {
                setAnchorEl(event.currentTarget)
                handleOpen(data)
              }}

标签： javascriptreactjsmaterial-ui