javascript - 当 SpeedDial 仅在单击时打开（不悬停）时，如何让 Material-UI SpeedDialAction onClick 事件触发

Question

出于某种原因，当我更改 material-ui<SpeedDial>以删除道具onMouseEnter={handleOpen}以便快速拨号仅在单击 FAB 而不是悬停时打开时，当我单击快速拨号菜单项时不会触发onClick事件。<SpeedDialAction>我觉得我在这里缺少一些基本的东西。

  return (
    <SpeedDial
      ariaLabel="Add"
      className={classes.root}
      icon={<SpeedDialIcon />}
      onClick={handleClick}
      onClose={handleClose}
      onBlur={handleClose}
      // onMouseEnter={handleOpen}
      // onMouseLeave={handleClose}
      open={open}
      direction={mobile ? 'up' : 'down'}
    >
      {actions.map(action => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          tooltipTitle={action.name}
          tooltipOpen
          classes={{ staticTooltipLabel: classes.staticTooltipLabel }}
          onClick={e => {
            e.preventDefault();
            alert('x');
          }}
        />
      ))}
    </SpeedDial>
  );

标签： javascriptmaterial-ui

Answer 1

使用preventDefault不会导致click事件不传播到父元素（据我所知，这是你想要得到的）。

您应该stopPropagation改用：

<SpeedDial
  ariaLabel="Add"
  className={classes.SpeedDial}
  icon={<SpeedDialIcon />}
  onClick={handleClick}
  open={open}
>
  {actions.map(action => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
      tooltipOpen
      onClick={e => {
        e.stopPropagation();
        alert("x");
      }}
    />
  ))}
</SpeedDial>

检查以下示例：https ://codesandbox.io/s/speeddial-open-on-click-rleg5?file=/demo.js