Material-UI是一个流行的React UI组件库,其中包含了SpeedDial和SpeedDialAction组件,用于创建漂亮的快速操作按钮。
要让SpeedDialAction的onClick事件在SpeedDial仅在单击时触发,而不是悬停时触发,可以通过以下步骤实现:
import React from 'react';
import { SpeedDial, SpeedDialAction } from '@material-ui/lab';
import { AddIcon, EditIcon, DeleteIcon } from '@material-ui/icons';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
};
}
handleOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
handleClick = () => {
// 处理点击事件的逻辑
};
render() {
return (
<SpeedDial
ariaLabel="SpeedDial example"
icon={<SpeedDialIcon />}
onClose={this.handleClose}
onOpen={this.handleOpen}
open={this.state.open}
>
<SpeedDialAction
icon={<AddIcon />}
tooltipTitle="Add"
onClick={this.handleClick}
/>
<SpeedDialAction
icon={<EditIcon />}
tooltipTitle="Edit"
onClick={this.handleClick}
/>
<SpeedDialAction
icon={<DeleteIcon />}
tooltipTitle="Delete"
onClick={this.handleClick}
/>
</SpeedDial>
);
}
}
这样,当用户单击SpeedDialAction时,onClick事件将被触发,而不是在悬停时触发。
关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议你访问腾讯云官方网站,搜索相关产品和服务,以获取更多信息和文档。
领取专属 10元无门槛券
手把手带您无忧上云