![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 53
治愈系的江予夺
这个作者很懒,什么都没留下…
展开
-
React+AntDesign:关于table的rowSelection在多选批量删除后仍为选中状态
本来是准备删除完了以后表格默认不选中的,但是发现选中状态并没有清掉,还是保留着下面的展示效果,觉得头疼,后面仔细查看了官方文档API后,通过尝试找到了解决办法。2. 这块主要是用到一个selectedRowKeys属性,通过设置这个属性就可以实现在执行删除命令成功后数据就不会默认被选中原来的id位置了,附上代码如下:// table表格部分的代码 <Table rowKey="id" locale={{ emptyText: <Empty /> }} r.原创 2021-04-22 17:29:50 · 3886 阅读 · 2 评论 -
React+AntDesign实现Form表单的动态增加删除操作
效果示例1. 原来效果2. 点击+之后实现说明此次开发需要用到动态生成多行表单,因为新老数据要兼顾,老数据是对象存储走的一个接口,新数据走的多行配置,对象数组存储,走的另一个接口,所以在展示上就需要区分下。注意这里默认了第一行不能删除,当然你也可以在变成多行的时候,给每一行都加上删除,但是为了避免数据被删成一行都不剩了,你需要处理下,要么在删成一行的时候禁止删除或者隐掉删除按钮,要么就在删除后要调接口的时候判断处理下,具体的得看需求来开发。因为这块的按钮有设置,如果配置的参数含有passwo原创 2021-04-20 16:12:38 · 3625 阅读 · 0 评论 -
React:使用AntDesign中的Upload组件实现文件上传功能
上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。实现效果实现说明1、fileList 用于上传的文件列表(这个是受控的)。2、multiple 这个属性是用于是否支持多选文件,开启后按住 ctrl 可选择多个文件,ie10+ 支持。3、onChange 通过此方法可以用于上传文件改变时的状态。4、onRemove 用于点击移除文件时的回调,返回值为 false 时不移除。5、customRequest 通过覆盖默认的上传行为,可以自定义原创 2021-01-06 14:45:44 · 6634 阅读 · 2 评论 -
React+AntDesign:disabledDate属性控制DatePicker的禁用日期选择范围
展示效果1.默认展示如下:2.选择计划开始时间后3.控制结束时间选择范围在开始时间之前不可选。实现说明1.这块的交互UI是使用的antd3.x版本的组件库。2.首先要做到这个是通过表单+时间控件组件组合使用,将基本页面布局出来,然后通过表单的方法获取到上一个时间控件所选的时间,然后进行禁用操作。<Form layout='inline'>//Row与Col是用来进行表单布局的,具体怎么操作可根据实际情况进行修改。 <Row className="edit-head原创 2020-12-23 09:54:08 · 1575 阅读 · 0 评论 -
React:实现一个增删改查基本管理页面
记录一下最近根据自己写代码的习惯进行了一个改进后的写法调整,主要是为了增强可阅读性与美观性的,实现了增删改查等基础功能,用的react+typescript开发。import { inject,observer } from 'mobx-react';import * as React from 'react';import { Table, Input, Button,Modal, Form, Select,message } from 'antd';import { FormInstance }原创 2020-12-09 14:14:29 · 3846 阅读 · 0 评论 -
React实现下载导出Excel表格功能
功能说明点击下载按钮实现下载功能。实现说明1.如果请求后需要拿到的数据已经是正常的数据流,那么可以直接处理数据。2.处理数据流的方法3.如果拿到的是已经处理过的json数据,并不是我们所需要的直接数据流,那么就需要进行一些处理去帮助我们找到需要特殊处理到的数据流。 设置一个“标志”,类似于定位符,找出定位做出相应处理。可以自己封装一个请求方式,在请求头部带上特殊“标记位”,然后在做请求的那块做处理。如果是用的已经封装好的请求,不想做额外封装处理,那可以在请求参数里带上,如下图所示。原创 2020-11-24 14:22:55 · 2575 阅读 · 0 评论 -
React+AntDesign:在Form表单内使用控件的value或defaultValue属性出现invalid Warning非法警告
问题简述在用到AntDesign的Form表单时往往有时候会用到一些选择器,通常有时候选择器本身会有一个默认值,我们往往习惯用value或defaultValue去注入默认值,但是实际上,在Form表单内写这些选择器组件的时候往往就会出现非法警告。出现原因选择器基本上都是写在表单字段组件内,用于数据双向绑定、校验、布局等,因为控件是被Form.Item 包装的,且被设置了 name 属性的 ,表单控件会自动添加 value,数据同步将被 Form 接管,这会导致不能用value 或 defaultVa原创 2020-11-09 18:03:09 · 1471 阅读 · 5 评论 -
React实现子组件向父组件传值更新状态
在做一个项目开发的时候,需要点击子组件的确定按钮在更新子组件的状态的同时去向父组件更新一个值状态,在我使用ref去进行传值处理的时候,出现了找不到这个方法的bug,后面换了下另外一种方式就能达到我要的效果。以下附上主要核心部分代码截图:...原创 2020-11-06 16:11:51 · 1623 阅读 · 0 评论 -
React+AntDesign使用Tree树形控件完整展现其中的层级关系,并具有展开收起选择等交互功能。
(一)需求展示效果图1.新增时树形控件展示效果2.编辑时树形控件展示效果(二)实现代码1.使用树形控件,选择自己需要实现的功能的相关调用方法跟值2.触发事件时获取数据及控件展示问题(三)关于树形结构转化说明如果后台传过来的树形数据跟展示不同,就需要前台这边自己进行处理比如这次后台传过来的数据格式:1.可以通过遍历,点扩展运算符获取数据每项做对应数据转化处理。2.也可以使用递归的方法进行一个树或者森林的遍历。下面是同样的树数据,但是有判断筛选处理。...原创 2020-10-26 14:37:31 · 2927 阅读 · 0 评论 -
React新增编辑复用封装模态框数据污染复现问题
问题出现描述在做项目开发的时候,因为新增与编辑功能打开是同一个模态框,考虑到可复用,所以为了代码简洁性,在用的时候就将模态框单独封装成一个组件,在父组件里面调用子组件,但是出现了新增编辑时表单数据会污染复现,即出现新增时表单带数据,编辑时表单不带数据显示问题。问题显示情况1.先点编辑再点新增出现的状况。2.先点新增再点编辑的状况问题解决说明1.给表单设置一个值用来控制新增编辑时数据更新问题。2.父子组件之间传值,定义类型。3.父组件内写方法。注意:1.项目开发使用的re原创 2020-10-14 10:55:25 · 680 阅读 · 0 评论 -
React非表单内的组件手动清空Input输入框跟RangePicker日期范围
效果展示情况说明在项目开发的时候,因为显示效果需要使用通过重置按钮来清空控制的输入框与时间日期选中的值。因为是属于非表单,所以无法通过表单的属性来操作Input输入框跟RangePicker日期范围选择。所以重置清空值,则需要要求输入的值跟...原创 2020-10-12 11:49:33 · 2030 阅读 · 1 评论 -
React+AntDesign在Table表格内关于单元格设置缺省处理,hover时显示
需求说明:从后端返回的一组数组,需要显示在表格内容区域一行显示4个,且每个应用之间需要用竖线隔开,前后各2个空格,且若应用权限显示的名称过长,最好可以省略,hover时显示完整的应用名称。具体效果显示图:具体操作说明:1. 从后台返回的是一组数组,要先将数组内容一个个显示,所以要先用到map方法,将数组里面的内容遍历显示。2. 控制溢出隐藏显示通过调整css样式修改控制,而hover隐藏内容显示则是使用它的title属性,通过title将隐藏的内容通过鼠标悬停时可以直接显示看到。3. 具体添加原创 2020-09-23 14:32:35 · 1359 阅读 · 0 评论 -
React:You cannot set a form field before rendering a field associated with the value
1. 在使用AntDesign的form表单时,在弄编辑新增使用同一个Modal框的时候,点击编辑按钮打开页面时,呈现编辑页面的表单需要渲染这一行record数据,虽说后台渲染的数据还是都渲染出来了,但是此时的页面打开控制台还是会出现警告。警告图如下所示:2. 出现这个原因,还是因为this.props.form.setFieldsValue在用传值的时候,所传的只能是form中使用到的参数,就是getFieldDecorator方法中的filed领域,没有的filed领域一律不允许多传,否则就会出现原创 2020-09-18 11:04:19 · 3129 阅读 · 0 评论