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