坑：antd的button设置style={{float:“right“}}之后点击事件不起作用

最新推荐文章于 2025-03-07 16:48:19 发布
最新推荐文章于 2025-03-07 16:48:19 发布
阅读量3.5k 收藏 4
点赞数 7
文章标签： antd html5 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/user54264988464/article/details/107085353
版权

想要实现效果，点击Button出现模态框。在这里插入图片描述

代码：

 <Button  style={
   {
   float:"right",marginBottom:10}} type="primary" onClick={
   this.showModal
最低0.47元/天 解锁文章
第八章:问鼎-React分类功能实战
程序员小刘
02-03 369
【代码】8. 分类功能实战。
第四章:玄丹-React商品管理实战
程序员小刘
02-03 509
在这里找到我们的 Table 表格，来完成我们的商品功能实战，下面我们会学到。
antd的button组件，动态控制样式
qq_67095994的博客
04-26 750
antd的button组件
关于引入antd样式不生效的问题
Jet_Lover的博客
12-18 5548
有时候我们在引入antd，依赖包什么的都下好了的，可是样式就是不生效，比如这样 import { Row, Col,Button } from 'antd'; <Row justify="space-between"> <Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
winform基于antdui中FloatButton悬浮按钮的使用
最新发布
qzt__l0ve的博客
03-07 1140
是悬浮按钮的全局配置对象，控制按钮组的位置、样式、交互等核心属性。名称描述类型默认值Form所属窗口Form必填Font字体Font?Control所属控件Control?Align方向TAlignBRVertical是否垂直方向booltrueTopMost是否置顶boolfalseSize大小int40MarginX边距Xint24MarginY边距Yint24Gap🔴间距int40Btns按钮列表必填Call点击回调Action必填//附着控件。
antd源码-button解析
luo_qianyu的博客
03-29 3017
antd源码-Button解析 Button render 在Button的组件中的index函数中，我们从antd引入button的时候是从index.tsx这个文件引入的 import Button from './button'; import ButtonGroup from './button-group'; export { ButtonProps, ButtonShape, But...
关于float属性导致button按钮无法点击问题的解决思路
qq_41950447的博客
04-29 5264
问题描述：有两个标签p和span，p位于span上层，button位于span中，当点击button的时候，button没有动作。 部分代码 HTML代码 <p> {{ chapter.title }} <span class="acts"> <el-button style="" type="text" @click="openVideo(chapter.id)">添加小节</el-button> &
button样式篇一（ant Design React）
weixin_30530939的博客
09-04 3036
这篇来介绍button中elementUi、iview、ant中样式结构 ant Design react ant-react中button分两个文件less: mixins.less：根据button功能样式不同封装成函数。 index.less：调用mixins.less中的函数来声明button的相关class 我们先来看mixins.less的结构 btn(基础样式，主要用设置...
import React from "react"; import { Layout, Button, theme, Dropdown, Space, message, Avatar, } from "antd"; import type { MenuProps } from "antd"; import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, } from "@ant-design/icons"; import { useState } from "react"; const { Header } = Layout; const handleMenuClick: MenuProps["onClick"] = (e) => { message.info("Click on menu item."); console.log("click", e); }; const items: MenuProps["items"] = [ { label: "1st menu item", key: "1", icon: <UserOutlined />, }, { label: "2nd menu item", key: "2", icon: <UserOutlined />, }, { label: "退出", key: "3", icon: <UserOutlined />, danger: true, }, // { // label: "4rd menu item", // key: "4", // icon: <UserOutlined />, // danger: true, // disabled: true, // }, ]; const menuProps = { items, onClick: handleMenuClick, }; const TopHeader: React.FC = () => { const [collapsed, setCollapsed] = useState(false); const { token: { colorBgContainer }, } = theme.useToken(); return ( <Header style={{ padding: 0, background: colorBgContainer }}> <Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsed(!collapsed)} style={{ fontSize: "16px", width: 64, height: 64, }} /> <div style={{ float: "right" }}> <span>欢迎xxx回来</span> <Dropdown menu={menuProps}> <Space wrap> <Avatar size={32} icon={<UserOutlined />} /> </Space> </Dropdown> </div> </Header> ); }; export default TopHeader; 报错：TaskQueue: Error with task : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
07-23
根据你提供的代码，我注意到 `MenuProps` 的定义是 `antd` 库的一个类型，但是在你的代码中没有正确导入该类型。这可能导致了错误的发生。 请确保你已经正确导入了 `MenuProps` 类型，可以尝试将以下代码添加到你的...
antd(react)常用技巧
weixin_45725653的博客
04-13 2638
目录 1.icon图标 1.使用方法： 2.官网给的样式（点一下图标代码就复制了） 2.各种间距 1.同一行多个列 2.小改动 3.按钮位置 3.标签页 实例效果： 4.卡片Card 5.表格Table 6.折叠面板 1.icon图标 1.使用方法： <Button icon={<DownloadOutlined />}>你好</B...
react 中 antd 按钮改更改颜色
Heiaoaoao的博客
08-12 5074
在react中修改antd的按钮背景色。
antd 中 如何改变按钮颜色，自定义样式颜色
2201_75483179的博客
07-10 2332
只是做了简单的封装，欢迎指正。
2021-09-28 巨坑 ！！！ Ant Design 按钮添加浮动点击事件失效
weixin_45664198的博客
09-28 913
巨坑 ！！！ Ant Design 按钮添加浮动点击事件失效不多笔笔看图![](https://img-blog.csdnimg.cn/adae803773e646589392636467e29cf6.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2VpeGluXzQ1NjY0MTk4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)问
FloatingActionButton的隐藏与显示
uwei的博客
02-03 6552
在用RecylerView展示数据的时候，在右下方显示一个悬浮的button，它的功能是： 在上拉时隐藏button，下拉时显示button，点击这个button回到顶部。如图： 布局如下： <!--不加上CoordinatorLayout，FloatActionButton不会显示--> <android.support.design.widget.Co...
antd-表单
Night_Emperor的博客
04-04 1184
下面是官网的表单实例：handleSubmit由箭头方式，变成普通方式；values是一个json对象，里面保存的是表单数据；const { getFieldDecorator } = this.props.form;getFieldDecorator(控件的name值，规则)(要绑定的控件)&lt;Form onSubmit={this.handleSubmit.bind(this)} clas...
【Element】el-button点击事件失效
m0_61049675的博客
01-29 2202
原因：由于el-button添加样式，例如float，position等等，浮动样式图层跟标准页面不在同一个层面上，因此无法点击。
antd design 引用样式不生效问题
老八的专栏
04-16 3671
react中使用ant design组件
react中使用antd的过程即踩坑（警告信息）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-13 2万+
1.在使用react-antd,Table组件时报警告，虽然不影响效果但是，对于强迫症的人来说是无法接受的。 react-dom.development.js?cada:506 Warning: Encountered two children with the same key, `null`. Keys should be unique so that components maintain...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值