Jak dosáhnu toho, aby se události Material-UI SpeedDialAction onClick spustily, když je SpeedDial otevřeno pouze po kliknutí (nikoli po najetí myší)

Z nějakého důvodu, když změním material-ui <SpeedDial> pro odstranění podpěry onMouseEnter={handleOpen} takže rychlé vytáčení se otevře pouze po kliknutí na FAB namísto najetí kurzorem, onClick událost v <SpeedDialAction> nespustí se, když kliknu na položku nabídky rychlé volby. Mám pocit, že mi tu něco zásadního chybí.

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

Odpověď

Pomocí preventDefault nezpůsobí click událost se nepřenese do nadřazeného prvku (což z toho, co jsem pochopil, se snažíte získat).

Měli byste použít stopPropagation místo toho:

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

Zkontrolujte následující příklad:https://codesandbox.io/s/speeddial-open-on-click-rleg5?file=/demo.js