[英]How to handle speed dial actions using material ui?
I have three actions supporting my SpeedDialAction, however when I try to log the event of the individual actions onClick, I get undefined.我有三个操作支持我的 SpeedDialAction,但是当我尝试记录 onClick 单个操作的事件时,我得到了未定义。
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 handleDialogOpen 只是尝试记录事件
I expect the output being an event object, not undefined.我希望输出是一个事件对象,而不是未定义的。
You can define an extra object item in actions
array.您可以在actions
数组中定义一个额外的对象项。
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:现在您需要调用一个处理函数并将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,actions.operation)
}}
/>
))}
</SpeedDial>
Hope it works.希望它有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.