- 博客(32)
- 收藏
- 关注
RSS订阅原创 react中通过css进行一行四个每点击一次就向右平移一次的动画效果
【代码】react中通过css进行一行四个每点击一次就向右平移一次的动画效果。
2024-04-18 17:17:39
334
原创 基于react的hooks搭建video.js观看视屏并增加相关配置并实时更新和禁止拖动快进和切换视屏倍速配置
由于最近接了个项目里面需要观看视屏记录学分等功能，就想着用video.js来进行观看视屏，但是网上查询用到的都是原生的，这边来增加一个通过react hooks进行观看视屏的配置 ，并展示如何定时器更新并记录观看视屏的进度，并且阻止拖动进度条快进功能⬇️。判断当前看视屏的最大事件 接口获取，如果没有最大进度就为0，每次拖动获取当前时间，如果大于最大2，就表示快进了，回到当前的最大事件，如果不大于，并且当前时间大于最大时间，则把当前最大的时间设置为现在观看的时间。5秒实时更新的关键代码。
2024-04-18 16:49:15
546
2
原创 react中点击事件当作link直接触发后端返回的下载url
在onClick事件中使用a标签的点击事件而不是使用history.push的好处是如果你进行history触发url，虽然可以成功但是会页面闪烁，当作跳转来然后下载之后返回，这样观感不好而且浪费性。
2023-12-29 11:23:06
596
原创 antdPro中EditableProTable可编辑表单编辑行配置可变下拉框选项和赋值其他字段
EditableProTable根据上一个下拉框选择的人物来进行对后一个下拉框选项进行变更，并在选中某个人后通过接口对后面的两个字段进行赋值，一开始是准备在onChange中改变下拉框中的options配置，colums中的renderFormItem来自定义字段，并且在点击单位名称的时候来通过useMemo进行对负责人下拉选项的重新渲染，和在负责人中获取整个表单数据并且进行重新替换赋值。但是不同字段赋值是可以在columns中通过onChange中的hooks来进行双向绑定进行赋值。
2023-12-04 16:58:11
2066
原创 antd的tree组件的使用与坑
每次更新或者添加 重新加载子节点 异步加载会消失，我发现是因为重新设置了treedate，如果要整个树形结构重新加载，需要把选中节点的状态清空在设置，如果是子节点，要用组件自带的loadData函数来获取子节点下面的数据，重新设置treedate会自节点的异步加载会消失。由于没有找到文档中有操作状态的函数，这边我是使用挂载来清除状态。下面是整体代码，清空状态需要看个人项目需求在哪边加👇。
2023-10-23 16:07:36
1395
1
原创 在设置antd-Mobile重的ImageViewer的前提下设置图片不可长按保存功能
由于用户需要图片资料的保密性，让我在移动端禁用小程序自带的长按保存功能。
2023-09-11 15:59:20
477
原创 antd中上传组件获取到的file传到后端为uid而不是（二进制）的问题
【代码】antd中上传组件获取到的file传到后端为uid而不是（二进制）的问题。
2023-08-04 13:41:49
1260
原创 Promise.all通过分块来处理并发几千条接口导致的异常
这里要避开两个坑，一个要在全局创造一个变量，来把获取到的推进去，如果放在函数内部，每次都会清空，另一个要把promiseall的接口先推到一个数组里面一起执行，不然会有问题。
2023-08-04 13:36:38
242
原创 ProFormUploadButton中的自定义受控组件fileList属性
antdPro的ProFormUploadButton自定义数据回显，由于功能需求，需要通过接口获取已上传的文件，而且不是通过form包起来，所以initialValue是不可用的，所以我们需要通过fileList来进行数据回显。
2023-07-21 11:41:23
1238
1
原创 window.open携带对象传参并获取
然后在获取的时候再将一整个对象或者数组转回来就可以使用了👇。所以我们可以通过将对象或者数组转字符串的形式携带上去。
2023-07-13 16:58:02
6207
1
原创 React中Table数据导出文件
在需求中，我们需要导出Table中的数据，并且可以全选和单选，这边导出的excel是通过后端返回给我的，接口仅作参考，可以做出适当改动。
2023-06-29 16:20:09
434
原创 Antd中Table的Columns快速搜索功能
我们在搜索的时候一般用到的都是自己新建一个input框，来进行重新出发接口，但是我这边有一个需求，客户让我们写在Table表头中。
2023-06-29 16:15:52
1262
原创 由于查询高德地图天气开放接口跨域问题
所以我这边是起了两个request，单独来处理这个https://restapi.amap.com/v3/weather/weatherInfo开放式接口。最后发现是request接口中带了我们项目的cookie和extend中的credentials访问的导致。但是由于如果这个注释掉，其他地方的接口需要用到cookie的话就会获取不到数据。由于在本地和线上都跨域，我一开始配置了proxy，但是到线上是失效的。只需要把credentials: 'include'注释掉即可。这边只能通过请求拦截来解决。
2023-06-15 17:24:07
1231
2
原创 React中基于Antd中的Select进行接口获取下拉框的模糊搜索
所以到最后我改成了Select组件，根据Select组件中的onDropdownVisibleChange、showSerach、onchange、value来进行模糊查询和双向绑定。一开始我是用的ProFormSelect组件，但是搜了半天官方文档找不到模糊搜索远程数据的相关属性并且实现的。如果需要回显的，可以在onChange的函数中，刚进入页面如果有值就给他设置上去，接下来上代码。这边在项目中根据客户需求需要把一个Select远程获取的options进行模糊搜索。1、让后端修改接口，进行模糊查询。
2023-05-16 16:12:29
1554
原创 React中基于antd/antdPro中Upload上传按钮点击删除弹框确认是否删除判断
如果你点击Upload或者ProFormUploa删除按钮，就会触发按钮中的onRemove属性，然后你再改变hooks，就会点击确定之后，hooks会慢一步改为true,导致点击弹框出来的确认按钮不会删除，第二时间才会删除，由于函数不能第一时间获取hooks异步更新的值和触发两次onRemove导致的。，一开始我是在showUploadList中的removeIcon属性来修改，给他一个poponfirm弹框，由于根据文档，onRemove中只用return true或者 false来判断是否删除改文件。
2023-05-16 15:57:15
2031
原创 React移动端Antd的input框搜索跳转之后返回保留搜索内容
搜了很多资料，大部分人都是用Form包起来使用，但还是有问题，我这边是使用了：sessionStorage.setItem("searchData",searchData) 在Session Storage进行存储首先使用useRef对Input进行挂载，然后再input的onChange事件中进行存储值跳转返回之后在useEffect中进行sessionStorage.getItem来获取存储的值，进行input的赋值，然后再清空myInput.current中有个属性是focus属性。
2023-03-31 11:48:01
819
原创 React微信小程序中离开当前页消除定时器
由于我这边的需求是进入一个文件阅读时间超过10s后触发一个接口来增加用户的积分，但是考虑到如果10s没满用户就离开当前页发现还是会触发之前的定时器，所以这边需要我们清除定时器。这边用到的时useRef全局定义一个定时器，在useEffect中进行创建和清除。
2023-03-24 13:22:26
736
原创 Antv-G2中数据更新但是不展示或者创建一个新的没有销毁原有的Chart问题
Antv-G2中数据更新但是不展示或者创建一个新的没有销毁原有的Chart问题
2023-03-21 13:57:59
1150
原创 umi-React移动端如何根据路由来改变页面html中的title
umi-React移动端如何根据路由来改变手机页面上方的title或者html中的title
2023-03-20 18:18:28
1717
2
原创 React基于Antv-G2带Annotation的饼图点击示例的自动循环轮播
React基于Antv-G2带Annotation的饼图点击示例的自动循环轮播
2023-02-15 18:00:16
844
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人