- 博客(87)
- 收藏
- 关注
RSS订阅原创 antd-Table组件表格，初次进来默认全部勾选
3、更新后的数据在rowSelection函数中赋值： selectedRowKeys: selectArr。id存在一样的情况，所以不能的单独用id作为唯一标识，可以用id和seq结合作为标识。下面这个的表格数据不同于上面，下面这个seq分两组，一组2025，一组2000。函数组件：1、声明一个空数组，存放勾选的唯一id值。2、onSelectChange函数中更新数据。
2025-03-25 18:01:03
138
原创 async/await：在前端开发中的应用
async、await 是 ES8（ECMAScript2017）引入的新语法，用来简化 Promise 异步操作。使用async和await可以让异步代码看起来几乎和同步代码一样，从而大大简化了代码的结构和可读性。你不再需要嵌套回调函数或链接多个Promise，代码变得更加直观和线性。async 用来声明一个 function 是异步的，await 用来等待一个异步方法执行完成。await 只能出现在 async 函数中。async 声明的函数，返回的结果是一个 Promise 对象。
2025-02-18 11:56:23
1134
原创 antd的Table组件实现增加一行可编辑的单元格
/ 解释1：为什么e.stopPropagation() 阻止冒泡。关注表格，表格是可以左右滑动的，可以新增一行，新增的一行都是可编辑的单元格。一个页面上需要展示一个可编辑表格。这个页面就称它为父页面，表格为子页面。多个页面都需要使用这个表格，把这个表格做成了公共组件的形式。图2-没写e.stopPropagation()报错的定位。图1-没写e.stopPropagation()的报错。图3-写e.stopPropagation()
2025-02-10 18:05:40
307
原创 antd-react日期组件disabledDate不可选择的日期 （置灰）属性
原定结项时间表单里回显为2025-02-06，延期时间的选择范围要设置从2025-02-07开始选择包括2.7号的;2.7号之前的置灰，不可选择。
2025-02-08 15:21:08
403
原创 获取表单的值的方法
1、获取表单中所有字段的值你需要遍历FormData对象。然而，FormData对象没有直接的方法来一次性获取所有字段的值，因为FormData主要用于，而不是用于数据访问或操作。如果你需要访问所有字段的值，你可以使用FormData的keysvalues或entries方法来遍历数据（for...of）。这些方法允许你遍历FormData对象中的所有字段，并获取它们的名称和值。来获取表单中特定字段的所有值用来获取表单中具有相同名称（name属性）的字段的所有值。
2025-01-07 11:40:57
272
原创 JavaScript中的return你了解多少？
返回正确的处理结果。返回错误的处理结果；终止处理；阻止提交表单；阻止执行默认的行为。return把控制权返回给页面，不带返回值的return语句 随时终止函数的执行。每个函数都会返回一个值，没有使用return，或者使用了return但return后面没跟值时，函数都将返回undefined如果需要返回undefined以外的值，必须使用return，并指明返回的值在遇到异常情况或不符合条件时，立即返回并结束函数。event.stopPropagation() 停止函数执行并返回, 用来停止事件冒泡。
2025-01-05 16:57:26
1354
原创 React中的合成事件
原生：onclick React的：onClick原生的是传入一个字符串，react写法传入一个回调函数原生：return false, react中的：event.preventDefault()【 拓展：为什么需要绑定this 】button按钮编辑的过程：React.createElement()
2025-01-05 15:58:13
588
原创 react中实现拖拽排序
5. 右侧有数据时，点击"确定" 按钮，数据就会以字符串拼接形式回显到TextArea框里，以顿号(、)分割。3. 当table没数据时，会显示一个空数据的图标，把空数据图标隐藏起来：z-index: -2。相当于拖拽的table组件全部复制过来，然后主要改动是moveRow，和render里面的。3. 点击左侧某条数据，这条被点击的数据就会被添加到右侧。6. antd3里面的拖拽组件用的 react-dnd的。代码难免会涉及到业务需求，展示部分代码，全部复制不能实现效果，仅供参考。
2024-12-27 19:27:26
1049
原创 在不合并单元格情况下，一个单元格并排展示多条数据
table表格页面，办理步骤、办理人这两列，像办理步骤会有多个值，但又不想单元格合并，多条数据展示在一个单元格内。像办理人这个，数据多还可以折叠/展开。部分代码，数据参数取用的是真实项目中的，仅供参考。关注“办理步骤”、“办理人”，这两列。
2024-12-26 15:11:53
254
原创 JS中for循环里的ajax请求不数据
for循环是单线程的，是同步的。把ajax变成同步的就可以了: async: false。在for循环里调接口，调接口的请求方式用ajax的写法，发现每次循环都会跳过ajax，导致获取不到接口数据。
2024-12-25 17:29:37
494
原创 JavaScript正则表达式：手机号码、电话号码校验
1(3|4|5|7|8)\d{9}$ 或者 ^1[34578]\d{9}$ 或 ^1[34578][0-9]{9}$ 或 ^1[3,4,5,7,8][0-9]{9}$第一位是【1】开头，第二位则是【3,4,5,7,8】，第三位则是【0-9】，第三位之后则是数字【0-9】。4. [3457]匹配3或者4或者5或者7，而(3457)把3457这四个数当成整体匹配，若要跟前面一样可以加或(3|4|5|7)。5. [34|57]匹配3或者4或者|或者5或者7，而(34|57)匹配34或者57。
2024-12-25 10:18:56
2485
原创 react+antd的Table组件编辑单元格
3. 有直接调接口默认回显数据、有Input输入框形式（当增加一行新的，默认显示图片2的效果。当选择了“纸质普票”，这一行就变成图3 的效果。当选择“纸质普票”以外的选项，又会变成图2 的形式。2. 当下拉选择的数据不同，展示出的第4567列也不同。4. 编辑好当前行，不保存无法再新增一行。代码仅供参考，里面涉及的业务逻辑可以忽略，可以看主要内容。第一列是下拉选择框，第2 3列是TextArea，图1。真实的业务需求（antd 3 版本+react）新增加一行，且单元格可以编辑。1. 默认增加一行时，
2024-12-24 18:09:57
849
原创 附件的上传和回显
上传多个附件，supItemfileList存着多个附件的数据，如下图。根据你的业务场景不同，需要调试优化此代码。一个数组存着多个附件数据。
2024-11-18 18:11:03
252
原创 validateFields里的values是空值
validateFields是从form里结构出来的，form:{validateFields} 确定清楚form指的是父组件的form还是其他组件的form，空值就是取错form了。后台管理表格页面，输入内容点击查询，查到对应数据后，点击这条数据，当把点开的数据关闭时，表格页面需要刷新，同时呢查询条件还在的。这就是混乱了父页面和子页面的form，是form捣的鬼。父级是后台管理可进行查询的表格页面，子组件是弹窗页面。react-后台管理，父组件里套着子组件，如后台管理的待办、待阅页面。
2024-08-26 19:46:49
308
转载 ref用法
【ref作用】：最熟悉的就是 用 Ref获取真实 DOM 元素和获取类组件实例，除此之外的功能，ref 派生出一些其他的高级用法，能够解决一些特殊场景下的问题。
2024-02-06 17:50:43
1420
原创 input框不能输入
如果以上两种情况都没问题，还有就是看看文件里有没有监听键盘事件例如：keydown，keyup，keypress等，看看是否阻止了默认事件，比如使用了preventDefault()，这个时候一定要检查清楚，如果使用了jquery，看看有没有return false的代码，因为在jquery中return false，既阻止了冒泡，又消除了默认事件。就是我目前碰到的情况，父组件里套着子组件，子组件是个弹窗，在弹窗里对公告标题输入，发现输入后光标一离开，输入的内容就不显示。
2024-01-30 17:13:00
2355
原创 useEffect的第二个参数
1、第一个参数：是一个函数，必传项。是组件要执行的副作用。可以看做和这三个函数的组合。2、第二个参数：可以不传或者是一个数组，非必传项。数组里面依赖改变时候副作用函数才会重新更新。所谓依赖改变就是 对比 [ 之前值 === 之后值 ] ，如果为，为由基本类型或者引用类型组成的数组。
2024-01-30 16:21:22
2794
原创 react中使用useEffcet抛出错误“超出最大更新深度”
【说明】：函数组件不能使用生命周期，Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）函数，必传项。是组件要执行的副作用。可以看做和这三个函数的组合。不传或 传空 [ ]，非必传项。数组里面依赖改变时候副作用函数才会重新更新。所谓依赖改变就是 [ 之前值 === 之后值 ] ，即更新前的值与更新后的值相等，为渲染。
2024-01-29 16:28:08
1132
原创 useState异步回调获取不到最新值
类组件中定义state，通过this.setState更新state里的值。而函数组件中的useState可以使函数组件像类组件一样拥有state。类组件中通过this.setState更新state，进而改变UI视图。函数组件中通过useState来改变UI视图。
2024-01-22 13:13:55
2416
1
原创 this.setState同步还是异步？
this.setState()不保证是同步的，所以在if条件中调用setState修改后的值，是做不到更新。利用this.setState()的第二个参数：回调函数，在等第一个参数内的state更新后再调用。param2: 回调函数 --- 等待state更新后，执行的函数。param1: 对象或函数 --- 改变state的值。发现if语句里拿不到type的值。
2024-01-12 10:19:40
692
原创 Object.keys()
Object.values(obj)返回值是一个包含对象自身的所有可枚举属性值的数组。处理数据，比如后端返回的数据是obj形式的，想要对相同的数据进行层级归类。2. 返回对象中每一项key的。（遍历一个对象，返回一个全是key的数组）（必须包含属性和方法的对象）；
2024-01-11 12:31:53
8969
原创 Object.assign()
4.3 Object.assign()拷贝是浅拷贝，它拷贝的是属性值，假如源对象的属性值是一个对象 obj，那么拷贝的则是这个对象值的指针（也就是地址）；Object.assign() 用于将所有可枚举属性的值从一个或多个源对象（sources）分配到目标对象（target），并返回目标对象（target）。Object.assign()是对象的静态方法，Object.assign()拷贝是浅拷贝，它拷贝的是属性值。源对象往target上合并，同时遇到属性相同，后者覆盖前者。4.2 异常会终止拷贝。
2024-01-09 18:04:57
810
转载 React知识
React是一个开源前端 JavaScript 库，用于构建用户界面，尤其是单页应用程序。它用于处理网页和移动应用程序的视图层。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。在 2011 年 React 应用首次被部署到 Facebook 的信息流中，之后于 2012 年被应用到 Instagram 上。阅读资源React 中文文档JSX 是 ECMAScript 一个类似 XML 的语法扩展。基本上，它只是为。
2024-01-09 11:27:24
106
原创 富文本BraftEditor引起的bug
不能把富文本处理过程直接写在initialValue上，犹如下面代码这种写法，会导致render渲染一次，富文本处理一次，重复处理，栈溢出。initialValue上写处理后的结果，处理的过程可以写在conponentDidMount生命周期里，一进页面就处理好，处理的结果存在state里，initialValue上拿到state里存的结果。第一次进行回显时，值写在initialValue身上，由于后端返回的时字符串，回显到富文本里，需要把字符串处理或转译下再回显到富文本框里。
2024-01-04 17:52:49
1943
原创 indexOf与includes区别
因为includes，返回是布尔类型true、false，可用于控制某个功能的显隐。方法的基本调用：第一个参数：要查找的元素；第二个参数：position从哪个索引值开始查找。因为indexOf，返回是索引、-1，可用于判断某个值是否在数组里。indexoOf()：不能匹配到数组中的NaN。includes()：能匹配到数组中的NaN。包含返回true， 否则false。下标， 未找到返回-1。在执行匹配的时候：进行。找到返回第一次出现的。
2023-12-01 17:40:18
663
原创 react大文件上传
文件太大分片上传能加快上传速度,提高用户体验能如果上次上传失败或者中途离开的话下一次上传过的就不用重头开始了已经上传过的文件根据HASH查询直接秒传。
2023-11-22 16:56:05
1834
转载 Chrome-Devtools介绍(代码调试)
刚从事前端代码开发那会，遇到代码报错，询问同事，同事直接说 “你F12看一下，打个断点”，蒙了，怎么打断点，怎么看，断点怎么使用，断点的界面看不懂，一顿尴尬，自己也不好意思问，自尊心作祟，不敢问，怕别人嘲笑，怕问的太简单，自己太菜，.....这种感受深有体会，希望下面的能帮助到你们，写代码会调试太重要了，调试就离不开打断点。Sources面板：网页的源文件，Debug调试器，IDE，文件变更与覆盖调试。Console面板：浏览器的控制台，各种输出信息，REPL环境。自律神仙ScarSu。
2023-11-16 18:15:57
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人