How to handle speed dial actions using material ui?

Question

I have three actions supporting my SpeedDialAction, however when I try to log the event of the individual actions onClick, I get undefined.

I have tried using different functions as actions, also tried arrow function syntax in the method call

onClick={e => action.action(e)}

and

onClick={action.action}

The actions:

const actions = [
    { icon: <Add />, name: 'Product', action: handleDialogOpen },
    { icon: <Add />, name: 'Addon', action: handleDialogOpen },
    { icon: <Label />, name: 'Tag', action: handleDialogOpen }
  ]

The SpeedDial:

<SpeedDial
          ariaLabel='SpeedDial example'
          className={classes.speedDial}
          icon={<SpeedDialIcon />}
          onBlur={handleClose}
          onClick={handleClick}
          onClose={handleClose}
          onFocus={handleOpen}
          onMouseEnter={handleOpen}
          onMouseLeave={handleClose}
          open={open}
        >
          {actions.map(action => (
            <SpeedDialAction
              tooltipOpen
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              onClick={action.action}
            />
          ))}
        </SpeedDial>

handleDialogOpen simply tries to log the event

I expect the output being an event object, not undefined.

score 3 · Answer 1 · answered Jun 21 '19 at 13:07

You can define an extra object item in actions array.

const actions = [
    { icon: <Add />, name: 'Product', action: handleDialogOpen, operation: 'product'},
    { icon: <Label />, name: 'Tag', action: handleDialogOpen , operation: 'tag' }
  ]

Now you need to call a handler function and pass the operation value as a parameter:

//handler function
 function handleClick (e,operation){
   e.preventDefault();
   if(operation=="product"){
     // do something 
   }else if(operation=="tag"){
     //do something else
   }
   setOpen(!open);// to close the speed dial, remove this line if not needed.
 };

<SpeedDial
          ariaLabel='SpeedDial example'
          className={classes.speedDial}
          icon={<SpeedDialIcon />}
          onBlur={handleClose}
          onClick={handleClick}
          onClose={handleClose}
          onFocus={handleOpen}
          onMouseEnter={handleOpen}
          onMouseLeave={handleClose}
          open={open}
        >
          {actions.map(action => (
            <SpeedDialAction
              tooltipOpen
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              onClick={(e) => {
                      handleClick(e,actions.operation)
                 }}
            />
          ))}
        </SpeedDial>

Hope it works.

How to handle speed dial actions using material ui?

1 Answers1