如何使用Material UI处理速拨操作？

Question

我有三个操作支持我的SpeedDialAction，但是当我尝试记录单击事件的各个操作时，我得到的是undefined。

我尝试使用不同的函数作为操作，还尝试了方法调用中的箭头函数语法。

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

并且

onClick={action.action}

这些操作：

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

快速拨号：

<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函数仅仅尝试记录该事件。

我期望输出是一个事件对象，而不是未定义的(undefined)。

- Addibro

Answer 1

您可以在actions数组中定义额外的对象项。

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

现在你需要调用一个处理函数，并将operation值作为参数传递：

//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.action.operation)
                 }}
            />
          ))}
        </SpeedDial>

- Neo

---

这里有多个 onClick 处理程序，很容易混淆 - 具体来说是 SpeedDialAction，应该在处理程序中传递 action.operation 而不是 actions.operation。 - Jason Sturges

Answer 2

这是一个基于Material UI 5.13.14的Typescript工作代码 https://mui.com/material-ui/react-speed-dial/。

可选项：定义menuOptions。

enum menuOptions {
  'MENU',
  'COMPARE',
  'SHARE',
}

定义你的行动。确保添加操作领域。

const actions = [
  { icon: <List />, name: 'Menú', operation: menuOptions.MENU },
  { icon: <Compare />, name: 'Comparar', operation: menuOptions.COMPARE },
  { icon: <Share />, name: 'Compartir', operation: menuOptions.SHARE },
]

现在创建SpeedDial组件。确保在SpeedDialAction中添加onClick={(e) => { handleClick(e, action.operation) }}。

  return (
    <>
      <SpeedDial
        ariaLabel="Menu"
        sx={{
          position: 'fixed',
          bottom: 20,
          right: 20,
        }}
        onClick={handleOpen}
        open={open}
        icon={<SpeedDialIcon />}
        direction="up"
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            onClick={(e) => {
              handleClick(e, action.operation)
            }}
          />
        ))}
      </SpeedDial>
    </>
  )
}

- Juan Pablo

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined

Answer 3

另外你也可以这样做。设置一个关闭模态框的处理程序。在onClick事件中，设置一个匿名函数来触发动作并关闭模态框。

const handleClose = () => setOpen(false);


<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()
            handleClose()  }}
        />
      ))}
    </SpeedDial>

- José Rafael Moro Galindo