Как заставить события Material-UI SpeedDialAction onClick срабатывать, когда SpeedDial открывается только при нажатии (не при наведении)

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

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