- 博客(50)
- 收藏
- 关注
RSS订阅原创 antd table 可编辑表格⚠ Warning: columns.render return cell props is deprecated with perf issue,
【代码】antd table 可编辑表格⚠ Warning: columns.render return cell props is deprecated with perf issue,
2023-08-04 16:16:40
1310
原创 antd select multiple模式 Dropdown onClick 失效
原因：onclick 是onMouseDown和 onMouseUp，也就是点击 松开为一次click。当up的时候会触发click，但是up的时候位置变化了。背景：当 Ant Design 的下拉菜单（Dropdown）在默认情况下从下方弹出，在某些情况下可能会因为页面空间不足而自动切换到上方弹出。解决方案：将 onClick 替换为 onMouseDown，因为 onMouseDown 事件在鼠标按下时触发，而 onClick 事件在鼠标释放时触发。复现描述：当输入搜索时，option会筛出来选项。
2023-08-04 16:13:05
417
原创 ‘XXX’ cannot be used as a JSX component 原因
react 对应ts 版本一致或者返回的是一个jsx数组而不是单个 JSX 元素
2022-11-03 14:45:54
5243
原创 js 垃圾回收机制
定义：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。像c语音，有内存管理的 malloc()和 free()。可以对内存分配和释放。JS 在创建对象时会为它们分配内存，不再使用对时会“自动”释放内存，这个过程称为垃圾收集。内存生命周期分配内存 ： 声明变量的时候使用内存 ： 读和写操作。释放内存 ： 释放所有不再使用的内存垃圾回收方式：标记清除：访问不到的都删除内存中所有的变量进入都会被标记 - 当内存进入当前环境又会被标记=两个相减就是需要被删除的。引用计..
2021-12-03 11:39:56
549
原创 antd Datepick 禁选时间 （30天之内）
需求：当前时间到30天之内可选// 不可选时间 const disabledTime = (date: any) => { const range = (start: any, end: any) => { const result = [] for (let i = start; i < end; i += 1) { result.push(i) } return result } c
2021-11-29 17:46:53
918
原创 braft-edit 富文本编辑器
需求：一个自定义插入文本的富文本编辑器优点：可以自定义control注：编辑器自身不带有上传功能，具体的上传功能需要通过uploadFn指定。media.uploadFn一些官方文档：中文的：https://www.yuque.com/braft-editor/be/mrgy92braft-util源码：https://github.com/margox/braft-utils （里面没有readme）braft-edit：https://www.npmjs.com/pa..
2021-11-18 11:22:10
1936
5
原创 antd +react 实现csv文件上传 （class以及hook版本）
需求：如图代码// 文件上传 handleupLoad=()=>{ const { fileList } = this.state if (!fileList) { message.info('请上传文件') return } const formData = new FormData() const ImportType = this.ImportFileFromRef.current.getF.
2021-07-06 14:19:45
873
原创 antd Form表单 InputNumber 问题
业务需求：产品类似图片这种，取input里面的值，用getFieldsValue()下面为错误代码：为什么呢？getFieldsValue()取得是name属性得值，对于minutes <Form ref={this.timerFormRef}> <Form.Item label="延时执行" name="minutes" noStyle rules={[{ required: true }]}> .
2021-07-06 14:05:42
2023
原创 sql语句编辑器（react-monaco-editor）
说明：react 的 monaco editor安装 npm install react-monaco-editor使用import MonacoEditor from 'react-monaco-editor'render(){ <MonacoEditor width="100%" height="700" language="sql" theme="white"//主题颜色 value={ruleSql} onC.
2021-06-30 15:31:27
1615
原创 uuid 自动生成识别码
说明 :随机自动生成识别码安装 npm install uuid --save使用import { v4 as uuid } from 'uuid'const str=uuid()console.log(str)//结果类似这种的字符串 9eab1bf1-961d-4df1-8e0c-3b3261f55f5f
2021-06-30 15:00:52
290
原创 dagre-d3实现流程图并可拖拽
官方文档：d3：https://d3js.org/工作需求：实现一个可拖拽的工作流画布，类型elsa-coreelsa-core：https://github.com/elsa-workflows/elsa-core简单说明：-Dagre是一个能够在客户端轻松创建流程图的JavaScript类库，而dagre-d3可以理解为是Dagre的前端，它使用D3来进行渲染。安装npm install darge-d3 --save -devnpm install d3 --..
2021-06-30 14:49:07
2938
3
原创 babel-plugin-import
“babel-plugin-import”，可以将 import { } from 的形式导入的文件，按需加载并且自动引入其样式。安装npm install babel-plugin-import -dev配置 ：在配置文件进行配置（package.json）"babel": { "presets": [ "react-app" ], //-----------这段------- "plugins": [ [ "impor
2021-06-30 14:00:55
2199
原创 react 动态设置state的值 （TypeScript）
说明：ts的类型限制原因，所以对动态的field进行类型处理首先 从 interface State 里面取 field 可能的集合然后 对field的类型匹配赋值
2021-01-15 16:39:35
1884
原创 二：业务功能实现：思绪总结——点击按钮当前页面的组件被替换
业务需求：点击按钮，跳转到另一个页面（或者另一个组件）A页面有一个按钮，点击按钮，跳到B页面实现思想：使用路由跳转import { Link } from 'react-router-dom'将跳转按钮用link包住 to=‘路径’（要在路由下面配置好）<Link to="/operateManage/operationAI/createPlan"> <Button type="primary" onClick={this.handlerOk}> 创建 <.
2021-01-15 16:33:41
134
原创 一：业务功能实现：思绪总结——按钮的默认选中
业务需求：默认选择第一个实现思路：state: btnclass=“active”默认选中按钮：className=‘this.state.btnclass’ onClick={()=>{this.setState({btnclass ：" "})}3.在css样式里面修改active的样式.active { border-color: #29b7b7;}4.右上的图标，antd的Badge，offset设置偏移的位置[右，下]代码： // 默认选中 defau.
2021-01-14 11:16:05
664
原创 React实现一键复制 copy-to-clipboard
安装 copy-to-clipboardnpm install copy-to-clipboard --save导入import React from ‘react’import copy from ‘copy-to-clipboard’使用this.state.select 就是内容 可以是任意的
2021-01-06 09:34:18
675
原创 SQL文本数据格式化的方法(sql-formatter)
首先安装sql-formatternpm install sql-formatter --save或者yarn add sql-formatter引入sql-formatterimport sqlFormatter from ’sql-formatter‘注意：如果引入有报错提升：无法找到模块声明的文件在src目录下面新建一个.d.ts 结尾的文件并写入:declare module ‘sql-formatter’使用效果...
2021-01-05 10:43:24
8884
6
原创 vuex的原理和使用
这里写自定义目录标题vuex的原理和使用vue:vuex的原理和使用vue:首先vue是双向动态的数据的方式驱动数据，而vuex就是解决多个视图需要的同一状态的状态管理机，采用集中式存储所有组件的状态核心：就是store，就是一个容器，可以装应用的状态，vuex和全局对象的区别，vuex的状态改变了，相应的舰也会马上更新，而且改变state唯一的方式就是提交突变mutation优点：我们可以很方便的跟踪每一个状态的改变使用方法：安装vuex：1.npm install vuex --sa
2020-11-24 20:00:02
381
原创 js中如何改变this指向？（三种方法）
如何改变this的指向呢？1.apply参数第一个this，后面用数组function test(a,b){ var c=a+b; console.log(this); console.log(c)}var obj = { name:'lisa', age:26}test.apply(obj,[1,2])2.call参数第一个this，第二位之后传递的参数function test(a,b){ var c=a+b; console.log(this); console
2020-11-16 19:16:00
1338
原创 ES6知识点梳理
新增的变量声明：letlet声明的变量特点：块级作用域没有变量的提升暂时性死区（避免全局污染）不允许重复声明const常量声明后不可以改变具有let的所有特点解构赋值:数组的解构完全解构 ：let [a,b,c]=[1,2,3]//a=1,b=2,c=3不完全解构:let [a,b,c]=[1,2,3,4]//a=1,b=2,c=3解构失败:let [a,b,c]=[1,2]//a=1,b=2,c=undefined集合解构：let [a,…b]=[1,2,3]//
2020-11-13 16:59:36
75
原创 Object.assign()是深拷贝还是浅拷贝？
Object.assign()是深拷贝还是浅拷贝？Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。objObject.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。也就是说，如果对象的属性值为简单类型（如string， number），通过Object.assign({},srcObj);得到的新对象为深拷贝；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。...
2020-11-09 19:10:18
948
原创 ajax请求
AJAX :Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）XMLHttpRequest 构造函数1.实例化一个ajax对象var x=new XMLHttpRequest();2.设置请求行x.open(“get”,url,true)//true 异步3.设置请求头x.setRequestHeader(“Content-type”:“application/json”)4. 设置请求体x.send([data])当请求方式为ge
2020-11-08 18:32:17
70
原创 event.preventDefault()和event.stopPropagation()
event.preventDefault()阻止默认事件event.stopPropagation()阻止冒泡<div class="outer"> <div class=”inner“><a link="#">点击跳转</div></div>$(".outer ").click(function(e){ alert(1)})//页面打印1，跳转$(".outer a").click(function(e){ e.st
2020-11-08 18:17:26
196
原创 jQuery
加载模式不同加粗样式区别一原生JS和jQuery入口函数的加载模式不同原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕区别2原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的jQuery如果编写了多个入口函数，后面的不会覆盖前面的选择器$（“css选择器”）所有 < input>元素可以用:checkbox 表示 选择 type为chexbox的所有元素事件方法方法一：bind(“.
2020-10-27 16:47:41
83
原创 类数组对象如何使用数组对象的方法和属性
var arr =document.getElementsClassName(“xxx”);arr是一个类数组对象 ，想使用数组对象的方法和属性。就要把他转化成数组对象。方法如下：1.Array.prototype.call(arr，参数)；2.[].call(arr,参数)[]===Array.prototype类数组循环遍历方法：1.Array.prototype.forEach.call(arr，function(item,index){})；index是key，item是val2.
2020-10-26 19:53:50
458
原创 margin:auto不能实现垂直居中
为什么 margin:auto不能实现垂直居中？margin：5px ；等同于margin-top：5px；margin-left：5px；margin-right：5px；margin-bottom：5px；所以按理解，margin：auto，应该是上下左右都是自动分配的，但是W3C规定，top，bottom设置为auto，其实默认值为0。所以margin:auto;=margin:0 auto;只是水平居中就是因为这种情况，W3C又规定，只有绝对定位的元素才可以使用top，bottom为au
2020-10-22 15:21:20
1348
1
原创 利用css实现水平垂直居中
当子元素定宽定高方法一：绝对定位absoluted父元素：relative子元素：absoluted +top,bottom,left,right：0；+margin：auto方法二：绝对定位absoluted父元素：relative子元素：absoluted ；+top,left:50%；+margin-left：-(width/2)；margin-top：-(height/2px)；方法三：绝对定位absoluted父元素：relative子元素：absoluted
2020-10-22 15:10:12
161
原创 包装器数据类型，String(),Math对象,日期
包装器数据类型var a = 3;// a = new Number(a);// 自动装箱a.toString(); Number()Boolean()String()var a = 3;var b = true;var c = “hello world” c 可以调用String.prototype中的方法以及Object.prototype原型中的方法String类型相关API length 字符串中字符个数 charAt() 指定索引位置上的字符 charCode
2020-10-20 15:08:03
122
原创 JavaScript数组，正则表达式
数组数组是存放任意数据类型值的集合，容器。在数组字面量中，数组使用"[]“作为数组的边界，数组由多个元素组成，元素与元素之间通过”,"隔开，元素可以为任意数据类型。数组是一种特殊的对象，通过length属性来获取数组的长度（也就是数组中元素的个数）数组的定义数组字面量var name = "name"var arr = [ 12,name,true, "larry", {}, function(){}, [], null];arr.length构造函数v
2020-10-19 19:17:29
1060
原创 JavaScript变量，对象，函数
变量变量都维护在栈区，基本数据类型的值都保存在栈区，引用数据类型的引用地址保存在栈区，值保存在堆区typeof 检验数据类型：注意null 返回的是object（1）先声明 var a; (尽量声明一次)（2）再初始化 a=10;（3）再使用 console.log(a);(4) 变量的提升 console.log(a); var a=3;//undefined 变量是指向一个值的基本数据类型的变量 保存的单个值6.编程语言（1）语法（2）系统库java->Arra
2020-10-18 19:39:49
74
原创 JavaScript 操作符 类型转换 循环语句 流程语句
操作符（1）算数运算符+加（常作number类型转换）-减*乘/ 除var a=3/2; // 1.5%（2）一元运算符++ 加一- -减一（3）逻辑运算符(短路运算符) && 逻辑与（结果取决第二个）当一个为假 无需判断第二个 var a=“hello” && 12;//12 ||逻辑或（取决第一个）第一个是真 就返回 不考虑第二个 var a=“hello” || 123；// hello ！将其他类型转为bo
2020-10-18 19:08:58
56
原创 JavaScript基本了解
JavaScript脚本语言是一种轻量级编程语言数据类型基本数据类型：typeof（）判断类型，（Array，null，对象返回的都是object）Number：表示方式：整数十进制 55 由0~ 9组成八进制 070 首位为0，其他位有0 ~ 7组成十六进制 0x11 首位为0x，其他位为0 ~ 9，A~ F浮点普通浮点数 3.1415926科学计数法 3.125e7可表示的范围是Number.MAX_VALUE：1.7976931348623157e+308（e+30
2020-10-12 19:41:30
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人