前端设计诗-CSDN博客

原创辞旧迎新 2022 虎虎生威呀我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。

辞旧迎新 2022 虎虎生威呀我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。

2022-01-12 10:51:17 859

原创 React.lazy和React.Suspense路由懒加载案例展示

1、在这里分享一下react路由懒加载的使用方式，可直接应用import React, { lazy, Suspense } from "react";import { Redirect } from "react-router-dom";import HomeLayout from "../layouts/HomeLayout";import BlankLayout from "../layouts/BlankLayout";const SuspenseComponent = Componen

2021-10-08 17:40:53 478 1

原创 ant-design-ProComponents-ProForm重置表单值

1、重置某一表单值，获取表单实例，调用表单方法 const formRef = useRef(); const handleSubmit = async (values) => { formRef.current.resetFields(['code']);2、

2021-09-17 10:45:47 2642

原创关于ant-design Table组件selectedRows翻页后不保留上一页已选中items的解决方案

1、2、自己遇到这个问题的时候也查了下其他人的解决方式，但大部分都又长又复杂，所以最后还是自己搞个。3、解决方式定义一个全局变量数组去存放我们最后选择的数组数据let initCLassIdList = [];记得在组件卸载的时候去释放内存 componentWillUnmount() { initClassIdList = null; }所用到的API const rowSelection = { selectedRowKeys, o

2021-05-17 15:48:47 1899 8

原创重启Vue学习之旅：适合起步的Vue-ant-design&&Vuex学习项目

1、基于[email protected]对于有基础的重新构建后台管理系统应该不难，只是为了熟悉一下Vue的语法2、项目地址我也是在网上找到的代码项目，正在按自己的想法不断重构中源代码地址...

2021-04-28 15:34:08 542

原创 Uncaught Error: must set key for ＜rc-animate＞ children on modal(React-select)解决方式

1、2、问题出在于下拉选择的默认值出现了undefined简单处理一下 const newDefaultValue = defaultValue.filter(e => e !== undefined);

2021-04-26 14:38:12 552

原创 react-ant-design-Select多选选择器禁用选项处理&&选项数据处理

1、2、实现禁用部分选项用到的是js的some方法 subjects.map(subject => { return ( <Option disabled={haveSelectSubject.some( id

2021-04-26 14:13:40 3656 1

原创我在react中用到的发布-订阅模式

订阅消息import emitter from '@/components/Events';// 组价挂载的时候进行事件的监听componentDidMount() { emitter.addListener('modalOpen', this.modalOpen);}// 组件卸载的时候移除监听 componentWillUnmount() { emitter.removeListener('modalOpen', this.modalOpen // 监听到事件需要进行的

2021-04-22 20:10:28 465 1

原创记一次if else 日常开发的简单优化写法

1、原代码 if (index === 0) { dispatch({ type: 'emailApi/inquireEmailReceiveListByPageAccount', payload: { loading: true, }, }); this.generateBadge(); } else if (index === 1) { dispatch({

2021-04-21 15:58:16 215 1

原创 JavaScript函数参数到底是按值传递还是引用传递？

1、传递参数ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样。如果是原始值，那么就跟原始值变量的复制一样，如果是引用值，那么就跟引用值变量的复制一样。对很多开发者来说，这一块可能会不好理解，毕竟变量有按值和按引用访问，而传参则只有按值传递。在按值传递参数时，值会被复制到一个局部变量（即一个命名参数，或者用 ECMAScript 的话说，就是 arguments 对象中的一个槽位）。在按引用传递参数时，值在内存中

2021-04-08 20:36:27 2266 3

原创 ant-design-mobile-Tabs纵向滑动触发切换tab问题解决方式

1、issues在使用这个组件的时候同样遇到了这个问题，也就是纵向滑动的时候会触发到tab切换事件，研究过许多办法，都没有解决，最终决定将原有组件的滑动去掉，自己去实现一个滑动切换tab效果。2、注册Touch事件，可以自己控制左右滑动间距，去减少上下滑动所带来的误触。 onTouchStart = e => { this.startX = e.touches[0].clientX; }; onTouchMove = e => { this.endX = e.

2021-04-07 14:09:27 1812

原创基于HTTP用Ajax解决的问题

1、基于HTTP用Ajax解决的问题对于Ajax解决的问题，现在查看HTTP相关知识，才明白原来是这样。看书看到的，分享一下总结来说：`Ajax解决`的问题在于服务器向客户端响应的数据时全部数据返回还是局部需要更新的返回。Ajax达到局部Web页面替换加载的异步通信手段。和以前的同步通信相比，由于它值更新一部分页面，响应中传输的数据量会因此而减少，这一优点显而易见。...

2021-03-20 22:47:52 121

原创 WebApp 解决输入框弹起遮挡布局问题

1、在网上找了很多办法，大多是去调用原生的方法去重新计算页面高度等。2、但是如果你的情况是由于输入框自动获取焦点后，输入法弹起，切换页面，导致页面布局改变。那你不妨可以换一种思路。3、也就是在做下一个操作的时候将输入法收起，再进行其他操作，就不会发生下一布局改变的问题。4、让输入法收起，也就是让输入框失去焦点 this.inputRef.onBlur();5、这样也能解决问题...

2021-03-11 19:33:50 270

原创 ant-design-mobile实现ListView拉动刷新显示上次更新时间

1、在APP上刷新实现上次更新时间是常见的需求，在这里分享一下在PullToRefresh 实现这一效果代码。2、实现思路是：在每次刷新的时候记住当前时间即可。3、代码配置在于PullToRefresh 的一个配置项：4、 pullToRefresh={ <PullToRefresh refreshing={refreshing} onRefresh={this.onRefresh}

2021-03-06 13:29:28 300

原创 ant-design-mobile ListView 下拉刷新与列表长按事件冲突解决方式

1、在使用ListView列表实现下拉刷新的同时，需要满足长按列表Item进入长按功能页面，这时候就会遇到下拉刷新会进入到长按列表的可能。2、一开始我一直在考虑如何去区分这两种动作，但一直未果。先看我的实现代码注册这四种事件 touchStart = () => { const { touchStartEvent } = this.props; this.pressTime = setTimeout(() => { touchStartEvent();

2021-03-04 19:17:45 661 1

原创 ant-design RangePicker时间选择框默认值设置处理

1、基础，直接上代码，不作过多解释// 做这个处理是为了避免出现invalid date const lastStart = deepStartDate === '' || deepStartDate === undefined ? deepStartDate : moment(deepStartDate); const lastEnd = deepEndDate === '' || deepEndDate === undefined ? deepEndDate :

2021-02-27 16:49:34 1936

原创数组迭代器方法拆分键值对的小Tip

数组迭代器方法拆分键值对的小Tip使用 ES6 的解构可以非常容易地在循环中拆分键/值对const a = ["foo", "bar", "baz", "qux"]; for (const [idx, element] of a.entries()) { alert(idx); alert(element); } // 0 // foo // 1 // bar // 2 // baz // 3 // qux真是niceeeeeeeeeeeeee!...

2021-02-21 11:38:56 173

原创使用instanceof去检测数组的弊端是什么？

使用instanceof去检测数组的弊端是什么？一般我们说去检测数组，会使用到if (value instanceof Array){ // 操作数组}使用这一方法可能大家很少会注意到会有什么问题。这也是我看书看到的，所以分享给大家。虽然这很少见到使用 `instanceof` 的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的 Array 构造函数。如果要把数组从一个框架传给另一个框架，则这个数组的构造函数将有别于在

2021-02-21 11:32:18 1153

原创 CSS怎么画“凹““凸“?

1、这里我们利用到的CSSwidth属性的首选最小宽度特性。所谓“首选最小宽度”，指的是元素最适合的最小宽度。2、在 CSS 世界中，图片和文字的权重要远大于布局，因此，CSS 的设计者显然是不会让图文在 width:auto 时宽度变成 0 的，此时所表现的宽度就是“首选最小宽度”。具体表现规则如下。• 东亚文字（如中文）最小宽度为每个汉字的宽度，如图 3-11 所示的 14。 • 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普

2021-01-26 20:07:24 383

原创 ant-design 搜索框单独监听allowClear事件

1、2、在方法中打印event.target.tagNametest = (e) => { console.log(event.target.tagName)}你会发现allowClear和Search打印出来是不一样的

2021-01-26 19:52:37 4485 2

原创 React -JSX中样式的像素值还需要加上px吗?

样式中的像素值当设置 width 和 height 这类与大小有关的样式时，大部分会以像素为单位，此时若重复输入 px，会很麻烦。为了提高效率，React 会自动对这样的属性添加 px。比如：// 渲染成 height: 10px const style = { height: 10 }; ReactDOM.render(<Component style={style}>Hello</Component>, mountNode); 注意，有些属性除了支持 px 为单位的

2021-01-25 20:11:29 618

原创 react中使用index作为key值会怎样?

**key**写动态子组件的时候，如果没有给动态子项添加 key prop，则会报一个警告：Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'App'. See https://fb.me/react-warning-keys for more information. 这个警告指的是，如果每一个子组件是一个数组或迭代器的话，那么必须有

2021-01-25 20:02:46 1381

原创 React 合成事件与 JavaScript 原生事件对比

下面我们从 4 个方面来对比 React 合成事件与 JavaScript 原生事件。1、事件传播与阻止事件传播浏览器原生 DOM 事件的传播可以分为 3 个阶段：事件捕获阶段、目标对象在这里插入代码片本身的事件处理程序调用以及事件冒泡。事件捕获会优先调用结构树最外层的元素上绑定的事件监听器，然后依次向内调用，一直调用到目标元素上的事件监听器为止。可以在将 e.addEventListener() 的第三个参数设置为 true 时，为元素 e 注册捕获事件处理程序，并且在事件传播的第一个阶段

2021-01-16 15:35:22 732

原创 react-setState更新机制--源码解析

1、摘自《深入React技术栈》2、setState 异步更新React 初学者常会写出 this.state.value = 1 这样的代码，这是完全错误的写法。注意绝对不要直接修改 this.state，这不仅是一种低效的做法，而且很有可能会被之后的操作替换。setState 通过一个队列机制实现 state 更新。当执行 setState 时，会将需要更新的 state 合并后放入**状态队列**，而不会立刻更新 this.state，队列机制可以高效地批量更新 state。如果不通过

2021-01-10 10:12:22 1151

原创关于For循环中将let替换成var的原因，我觉得这是最好的回答

for 循环中的 let 声明在 let 出现之前，for 循环定义的迭代变量会渗透到循环体外部：for (var i = 0; i < 5; ++i) { // 循环逻辑 } console.log(i); // 5 改成使用 let 之后，这个问题就消失了，因为迭代变量的作用域仅限于 for 循环块内部：for (let i = 0; i < 5; ++i) { // 循环逻辑} console.log(i); // ReferenceError: i 没有定义在.

2021-01-05 09:37:21 725 2

原创 react-ant-design输入框输入时拼音字符触发onChange事件（防抖）处理

1、在我们做输入框时，一般会进行字数限定，但是会发现输入拼音的时候，拼音字符也会一直触发onchange事件，导致也会让我们的判断失效。2、下面的方法也是我自己搜索得来，其实场景比较复杂。我的应用场景是非受控的组件下处理。直接在Input中加入handleComposition事件，这个事件内含三种状态：start-update-end；分别对应着开始输入，正在输入，结束输入三种状态。所以我把我的判断移入到这个事件中进行判断。3、具体场景可自行去搜索更详细的解答，这里分享我的代码 // 处理将字

2020-12-23 10:12:29 3845

原创解决ant-design表格固行和列多出空白列的问题

1、问题描述在使用表格组件的时候，使用固定列，可能会遇到当你表头内容小于你设定的值时，会多出一列空白的问题。2、解决以上问题只需要我们动态的去判断当有多少列的时候需要去固定列这个属性。3、4、...

2020-11-27 13:59:20 4781

原创 ant-design树选择框生成treeData数据结构

1、使用TreeSelect组件时，我们需要根据接口返回的数据生成官方样例的数组结构2、这里主要是分享代码，代码有根据具体情况命名进行修改，仅供参考 const classGradesData = []; // eslint-disable-next-line no-unused-expressions classTypeSet && classTypeSet.forEach((item, idex) => { // 生成children

2020-11-24 22:22:17 2579

原创 reduce方法实现对数组相邻相同元素进行合并

1、业务需求：渲染一个表格数据，对相同元素进行合并单元格。2、这里我们需要判断数组前一个元素是否和后一个元素相同，如果相同就进行合并，并且给出重复出现的数值。实现代码这里主要用到了reduce方法,下面代码是对数组进行处理，不同的数组结构处理方法就是不同。 function getNewCourseList(list) { list.map(item => { item.courseList.map(courseListItem => {

2020-11-19 09:13:14 1708

原创 react中函数带（）和不带（）引发的问题

1、在一次使用react-ant-design-mobile组件的时候，由一个函数定义引发的BUG。代码如下这里要实现的功能是，定义一个Toast回调函数，在提示之后进行一系列操作。错误写法 }).then(() => { Toast.success('发布成功', 1, this.onClose()); }); } onClose = () => { ........ }正确写法也就是去掉this.onClose的括号，其

2020-11-02 21:26:48 1141

原创 react-ant-design实现可拖拽可编辑的表格功能

1、需求功能：表格可进行拖拽，点击编辑的时候可进行编辑，前两个是input输入框，后面是下拉选择框，可增加可删除。2、查看ant-design组件的时候，会发现拖拽和可编辑表格是两种类型表格。所以我的实现思路是，为了避免两种类型表格杂在一起带来的不确定问题，所以直接引入两种表格，通过变量去控制区使用哪种表格。当我需要拖拽的时候渲染拖拽表格，当我要编辑的时候渲染编辑表格，使用共同的数据即可。3、具体实现代码因人而异，这里我只给出部分觉得可以帮助大家的代码区分渲染编辑状态时是输入框还是下拉选择框

2020-11-02 11:29:15 4802 2

原创 react中使用splice函数去删除数组的某一项

1、splice函数splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。slice() 方法可从已有的数组中返回选定的元素。所以，在使用的时候，就要注意的是：splice返回的是被删除的项目2、举一个我在react中使用的小案例：完成的功能是删除数组的某一项：这里我需要更新的应该是我截取后的数组 // 删除 deleteSelect = (index) => { const { initSelectInputList } = this.state

2020-11-01 23:16:09 9537

原创 JS中对象转数组案例解析

以一次实际开发中的实例，将几种对象转数组的方法都试了一遍： // const errorList = Object.keys(error) // console.log('error', error) // console.log('Array.from', Array.from(error)) // console.log('keys',Object.keys(error)) // console.log('values',Object.val

2020-10-23 22:41:09 519

原创 ‘reactdom‘ is not defined.mountnode is not defined 解决办法

在使用ant-design的组件时，会遇到一下两个错误，这里分享下我找到的解决方法。‘reactdom’ is not defined.`1、在头部引入import ReactDOM from 'react-dom';mountnode is not defined2、替换写法const EditableFormTable = Form.create()(EditableTable);// ReactDOM.render(<EditableFormTable />, mountN

2020-10-20 10:04:24 4095 2

原创解决ant-design刷新存在缓存问题

1、在使用ant-design-mobile的ListView組件的时候，我遇到的问题是当进行拉动刷新时，页面数据并没有完全的刷新清空，所以我遇到产生一系列的问题。2、这时候我就想到了去找强制刷新页面的方法或者React重新render的方法，但是用于react-app上又有些特殊性，所以以上两种方法并没有产生作用。反而会引起app上刷新空白登问题。3、因为基于dva.js开发，所以想到另外一种方法就是直接在model进行数据同步处理，定义一个方法将要处理的数据清空即可。代码示例在model定义一

2020-10-17 09:05:46 3071 2

Todo使用手册.docx

WebCMS 2019111.zip

空空如也