![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ant design - react
每一天,每一步
相信自己,你可以的
展开
-
useEffect的依赖项看起来是一样的,但是会触发重复请求
问题:页面查询条件作为useEffect的依赖项,页面初始加载的时候查询一次,查询条件不变的情况下,点击查询按钮,还会触发请求。原因:依赖项useState设置的是数组,数组是引用类型。解决:将依赖项类型改为引用类型,如字符串。原创 2024-08-30 13:49:26 · 63 阅读 · 0 评论 -
react antd点击table行时加选中背景色
state变量selectedRowKeys来记录选中的行的key。rowSelection属性用于配置行选择功能,而rowClassName属性用于根据行的key给行添加特定的className,从而实现加亮背景色的效果。点击表格的一行时,该行的背景色会变为蓝色(Ant Design默认主题的选中颜色),同时selectedRowKeys会被更新为当前点击的行的key。在React中使用Ant Design的Table组件时,可以通过rowSelection属性来实现点击行时加亮背景色的功能。原创 2024-08-29 09:26:43 · 207 阅读 · 0 评论 -
git打包某个分支的特定提交
创建一个新分支或标签来指向该提交。确定要打包的提交的哈希值。的文件,其中包含特定提交。创建分支或标签后,使用。原创 2024-08-22 17:46:37 · 284 阅读 · 0 评论 -
react antd drawer getContainer挂载到父组件类名
【代码】react antd drawer getContainer挂载到父组件类名。原创 2024-08-22 12:40:40 · 90 阅读 · 0 评论 -
react antd from表单全选按钮Button触发CheckBox状态回显
1. 如果将Button按钮改成Checkbox全选,CheckBox全选的onChange事件会冒泡影响CheckboxGroup的onChange事件,使用e.stopPropagation无法阻止事件冒泡。上述代码使用React和Ant Design实现了一个表单,其中包含了一个CheckboxGroup和一个“全选”按钮。2. 如果将1中的CheckBox全选组件位置移动到CheckboxGroup外部Form.Item的内部,使用form.setFieldsValue无法正常回显。原创 2024-08-19 14:09:02 · 372 阅读 · 0 评论 -
react antd form嵌套折叠面板Collapse
上述代码中,包含两个折叠面板的表单。每个折叠面板都有自己的一组表单字段。当提交表单时,所有的表单数据会以一个嵌套对象的形式被提交。使用Form.Item组件的name属性来指定一个字段路径,这样就可以创建嵌套的表单数据结构。原创 2024-08-19 14:05:29 · 302 阅读 · 0 评论 -
echarts地图地市名称简写
请注意,为了使地图显示正常,需要确保已经加载了ECharts的中国地图数据。可以通过ECharts的官方网站下载中国地图的geoJSON数据,并在ECharts中通过echarts.registerMap注册。在ECharts中,想要显示地市名称的简写,可以在数据中直接提供简写形式,并在tooltip或者label中使用formatter属性来自定义显示格式。上述代码中,formatter函数被用来生成地市的简写名称。在实际应用中,需要根据实际的简写规则来定义这个函数。原创 2024-08-12 16:26:16 · 224 阅读 · 0 评论 -
antd react echarts地图组件及使用
antd react echarts地图组件及使用原创 2024-08-12 16:05:52 · 454 阅读 · 0 评论 -
echarts x轴文本固定字数换行显示
【代码】echarts x轴文本固定字数换行显示。原创 2024-08-12 15:48:59 · 237 阅读 · 0 评论 -
react本地启动项目大图片转不了base64控制台报错404,重命名图片后可以访问到图片
react本地启动项目,大图片转不了base64,控制台报错404,重命名图片后可以访问到图片。过一段时间重新启动项目依然404。解决:将图片从src->assets目录移到public目录下,即可解决。原创 2024-08-12 15:40:55 · 114 阅读 · 0 评论 -
react echarts遍历数据生成tooltip模板字符串拼接html出现逗号
【代码】react echarts遍历数据生成tooltip模板字符串拼接html出现逗号。原创 2024-08-12 15:37:51 · 90 阅读 · 0 评论 -
antd react form.list动态增减表单项Switch受控
这个代码示例展示了如何使用Ant Design的Form和Form.List组件来创建一个可动态增减表单项的表单,并且每个表单项旁边都有一个Switch组件,这些Switch组件是受控的,即它们的状态会被保存在组件的状态中。当用户提交表单时,表单的数据以及Switch的状态都会被打印出来。原创 2024-08-02 16:59:44 · 423 阅读 · 0 评论 -
antd react form Switch回显数据valuePropName=“checked“
上述代码中,Form.Item的name属性与initialValues中的键名相对应,以此来确定需要回显的数据。当表单首次渲染时,Switch组件会根据initialValues中的switchData值来设置自身的状态。在Ant Design中,使用Form组件和Switch组件时,可以通过Form.Item的name属性来绑定数据,并通过Form的initialValues来回显数据。原创 2024-08-02 16:58:54 · 311 阅读 · 0 评论 -
Antd嵌套Form.Item必填项添加红色星号
【代码】Antd嵌套Form.Item必填项添加红色星号。原创 2024-07-30 10:40:43 · 464 阅读 · 0 评论 -
antd select onClear onChange的使用
当用户选择一个选项时,onChange会被触发,并且新值会被记录和使用。当用户点击清除按钮时,onClear会被触发,并且value会被重置,清除时也会触发onChange事件,因此也可以在onChange事件中对newValue做判断,newValue为undefined时,进行特殊的赋值。原创 2024-07-25 11:26:23 · 178 阅读 · 0 评论 -
antd table斑马线
在Ant Design的Table组件中,要实现斑马线效果(即行之间的间隔样式),可以通过自定义rowClassName属性来实现。这样,表格中偶数行和奇数行将有不同的背景色,从而形成斑马线效果。可以根据需要自定义行的样式。原创 2024-07-22 16:40:01 · 387 阅读 · 0 评论 -
antd drawer extra中按钮点击事件获取子组件的数据
在ChildComponent内部,它通过useImperativeHandle暴露了一个getData方法,该方法返回需要传递给父组件的数据。在ParentComponent的handleButtonClick事件处理函数中,通过childRef.current.getData()调用子组件的方法来获取数据。在子组件中使用useImperativeHandle或forwardRef来暴露一个方法给父组件调用。在extra按钮的点击事件中,调用子组件暴露的方法获取数据。原创 2024-07-18 16:11:50 · 473 阅读 · 0 评论 -
antd table拖拽排序表格拖拽时行样式不生效
问题:antd table拖拽排序时,选中拖拽行样式跟antd官网示例不一样,加的样式没有生效。1. 将样式放在样式文件的最外层,不被其他元素包裹;2. 添加z-index属性.原创 2024-07-15 10:55:38 · 157 阅读 · 0 评论 -
ant design form动态增减表单项Form.List如何进行动态校验规则
在使用ant design form动态增减表单项Form.List时,Form.List中有多组表单项,一组中的最后一个表单项的校验规则是动态的,该组为最后一组时,最后一个表单项是非必填项,其他时候为必填项。假设动态增加了两组表单项,均为填写内容,在必填项校验被触发后,删除了第二组表单项,此时仅剩一组表单项,想要最后一个表单项的校验状态不再显示必填项提示。等相关代码,将规则校验放在删除表单组的操作中。使用动态校验规则,获取到最后一组的索引,使用form.validateFields重新触发校验规则。原创 2024-07-12 14:22:29 · 514 阅读 · 0 评论 -
react hooks antd 父组件取子组件form表单的值
来访问子组件的方法或属性。子组件包含一个表单, 使用forwardRef、useImperativeHandle:forwardRef允许组件使用ref将 DOM 节点暴露给父组件,使用useImperativeHandle暴露方法给父组件。在React中,父组件可以使用。原创 2024-07-11 15:38:33 · 450 阅读 · 0 评论 -
react遍历数据翻页
在React中,遍历翻页通常意味着需要处理一组数据的分页显示。可以通过维护当前页码和每页显示的项目数量来实现。请注意,上述代码没有处理边界情况,如当前页码小于1或大于总页数时的操作,实际应用中可能需要添加这样的检查。是根据总项目数和每页项目数计算得到的总页数。使用此组件时,需要传入一个。组件内部维护当前页码。是当前页面显示的项目,而。原创 2024-07-10 13:50:16 · 258 阅读 · 0 评论 -
antd select组件下拉菜单渲染错误Encountered two children with the same key
接口返回的数据用于select组件时,控制台报错:Encountered two children with the same key。鼠标在下拉菜单中来回滚动时,下拉选项出现越来越多的重复值。在select的options对象中,设置key属性,并保持其唯一即可。问题原因在于:返回数据中有相同的数据被用作value值。原创 2024-07-03 19:16:26 · 147 阅读 · 0 评论 -
react antd表格翻页时记录勾选状态
属性来控制勾选状态,并添加preserveSelectedRowKeys: true以保留 key。设置rowKey属性。原创 2024-07-03 19:12:55 · 619 阅读 · 0 评论 -
antd table ::-webkit-scrollbar hover时高度变高了
:-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分。::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分。::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb — 滚动条上的滚动滑块。原创 2024-06-26 14:03:01 · 243 阅读 · 0 评论 -
antd table给某些表头设置样式
注意:可以根据需要添加更多的条件判断来定制不同表头单元格的样式。此外,components属性用于替换Table组件的子组件,在这个例子中,替换了表头单元格(header.cell)为自定义的CustomHeaderCell组件。上述代码中,创建了一个自定义的CustomHeaderCell组件,它会检查传入的列属性column.title来决定是否给单元格设置特定的样式。在Ant Design的Table组件中,可以通过columns属性中的headerCell来给特定的表头设置样式。原创 2024-06-20 14:40:34 · 716 阅读 · 0 评论 -
react antd table点击表头事件onHeaderCell
这个属性接受一个函数,该函数返回一个对象,该对象的。在Ant Design的Table组件中,可以通过使用。属性是我们要处理的点击事件处理函数。函数将被调用,并且相关的列标题将会被打印到控制台。属性来访问表头单元格,并绑定点击事件。数组中的每个对象都调用了。方法,并对每个对象添加了。原创 2024-06-18 10:23:56 · 564 阅读 · 0 评论 -
momentjs格式化12位日期时间为连字符的样式,如YYYY-MM-DD HH:mm:ss
【代码】momentjs格式化12位日期时间为连字符的样式,如YYYY-MM-DD HH:mm:ss。原创 2024-06-07 13:54:20 · 137 阅读 · 0 评论 -
react antd table handleTableChange sortorder始终是升序
react antd table handleTableChange sortorder始终是升序,点击触发请求后,表头该字段不会显示为降序,而且升序的小箭头不会像and design上面的示例那样显示成蓝色的。表头是动态渲染生成的,而不是写死的。点击排列后,重新渲染生成最新的表头。原创 2024-06-05 10:41:44 · 149 阅读 · 0 评论 -
ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项
ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项。原创 2024-06-04 16:54:28 · 569 阅读 · 0 评论 -
ant design DatePicker RangePicker范围选择框设置禁用日期、时间、分钟
【代码】ant design DatePicker RangePicker范围选择框设置禁用日期、时间、分钟。原创 2024-06-04 16:36:32 · 279 阅读 · 0 评论 -
react ant design父组件中的Drawer onClose事件传给子组件,子组件通过onClose传参给父组件时参数打印出来是SyntheticBaseEvent,页面报错
react ant design父组件中的Drawer onClose事件传给子组件,子组件通过onClose传参给父组件时参数打印出来是SyntheticBaseEvent(React合成事件的一个类型)而不是useState设置的数据类型,导致页面报错。方法二:不通过onClose进行传值,而是将父组件中的useState定义的setData传到子组件,在子组件中直接使用setData(newData)获取新的数据。原创 2024-06-03 15:02:47 · 183 阅读 · 0 评论 -
ant design select多选时,选项中有“全选”和其他选项互斥时的处理方式
选了“全部”,选中项中就不能有省地市;选择省地市的时候,将“全部”从选中项中去除,只保留省地市。原创 2024-06-03 13:46:55 · 236 阅读 · 0 评论 -
antd 动态增减表单项默认呈现一组表单项
使用initialValues设置初始值,可直接设置为:initialValues={{users: [{}]}}。在Ant Design(antd)中,你可以使用。组件来动态增减表单项。原创 2024-06-03 11:05:05 · 236 阅读 · 0 评论 -
ant design Drawer Instance created by `useForm` is not connected to any Form element. 解决:forceRender
使用ant design中的Drawer组件和Form组件时,控制台提示:Instance created byuseFormis not connected to any Form element. Forget to passformprop?调用Form.useForm()方法时Form element还未初始化,无法挂载方法。Drawer元素上面加forceRender属性。原创 2024-06-03 11:00:25 · 146 阅读 · 0 评论 -
解决React Each child in a list should have a unique “key“
React页面提示:Each child in a list should have a unique “key“,排除了遍历生成的元素,最后发现是Table需要加rowKey。原创 2024-06-03 10:53:41 · 154 阅读 · 0 评论 -
antd RangePicker清空日期时报错
属性时,始终传递数组,即使要清空日期也要传递。事件处理函数不正确,没有正确更新组件的状态。事件处理函数中,当用户清空日期时,更新。组件的要求来进行,比如直接设置了。原创 2024-06-03 10:48:31 · 726 阅读 · 0 评论 -
Warning: value should in shape of { value: string | number, label?: ReactNode } when you set labelIn
修改value写法为value={{ value: currentSelectedKey, label: currentSelectedLabel }}原创 2024-06-03 10:47:12 · 242 阅读 · 0 评论 -
Select onChange causes warning: label of value is not same as label in Select options.
select的options中的label、value没有跟默认值对应上。原创 2024-06-03 10:45:15 · 157 阅读 · 0 评论 -
react antDesign DatePicker 禁用日期,禁止选择部分日期和时间 不能选择当前时间之后的日期、小时、分钟
禁止选择部分日期和时间 不能选择当前时间之后的日期、小时、分钟原创 2024-05-28 10:14:34 · 297 阅读 · 0 评论 -
react解决电脑分辨率及缩放导致页面变形的问题
如果使用了qiankun微服务,该应用是子应用,嵌入到主应用中时自适应效果不生效,可能是受到主应用中的配置影响,可以尝试在主应用中加入自适应方法查看效果,但是会影响主应用中页面模块的原有展示效果。另外,如果本身页面的字体已经很小,比如使用的11px、12px的字体大小,在电脑高分辨率的情况下,页面字体会显示的非常小,个人觉得用户体验不是很好。原创 2024-05-27 11:05:54 · 575 阅读 · 0 评论