react
这个专栏主要分享我的react技术
追逐蓦然
一步一个脚印
展开
-
React整合FullCalendar笔记(一)
React整合FullCalendar笔记(一)前期因为公司的需求,需要一个可以拖动的日历效果。经过前期的调研,找到 FullCalendar 框架比较符合项目的需求。但是碍于现在关于这个框架的文档都比较零散和不全。在经过几天的调研中,我大概实现了部分的功能,由此想做一系列的博文跟大家分享一下。实现效果第一期,我们就简单的使用这个框架,在页面上面单纯的展示在页面中。主要代码大家可以到 官方文档 进行学习。...原创 2021-12-23 10:22:36 · 1721 阅读 · 1 评论 -
REACT HOOKS实现离开页面、刷新页面的时候,强制提醒
REACT HOOKS实现离开页面、刷新页面的时候,强制提醒工作中遇到这个需求,网上对于HOOKS实效这个效果的文章很少,所以记录一下。其实很简单,几行代码就可以实现了。 function beforeunload (e) { let confirmationMessage = '你确定离开此页面吗?'; (e || window.event).returnValue = confirmationMessage; return confirmati原创 2021-11-22 10:14:12 · 11237 阅读 · 0 评论 -
React 实现表格选取
React 实现表格选取在工作中,遇到一个需求,在表格中实现类似于Excel选中一片区域的,然后拿到选中区域的所有数据。1.实现需求和效果截图1.获取选中区域的数据2.选择的方向是任意的3.支持几行 / 几列的选取3.通过生产JSON给后台进行交互4.标记出表头和第一行的数据2.核心代码解析2.1区域选择onClick={() => { // 区间选取 if (itemIndex != 0) { setType('slide')原创 2021-10-25 16:05:03 · 919 阅读 · 0 评论 -
react动态表单
react动态表单1.小要求在工作中,我们也会碰到这样子的需求:在填写信息的时候,可以填写多个人名、多个需求、以及动态生产一个分组。今天我们就以: 可以动态的添加/删除人名、路径以及可以添加/删除一个分组的需求来开始今天的学习之旅。需求如下图所示:2.技术点分析1.数据结构2.react+antd 动态编辑表格数据提及的知识点3.js操作数据的方法: 添加数据、根据下标删除数据3.代码分析3.1 数据结构分析/*** 1. 最外面是一个数组* 2. 中间是一个字典,每个字典就是一个原创 2021-09-29 13:41:42 · 1251 阅读 · 0 评论 -
react动态选择框
React动态选择框小需求在工作中,我们也会碰到这种需求: 为了提高用户的体验,在搜索的时候,采用灵活查询。用户可以自己选择查询项并且填写对应的值。这篇博文涉及知识点在这篇博文“react+antd 动态编辑表格数据”中提及过。大家可以先去这篇学习一下然后这里。示例代码import React, { Component, useState } from 'react';import { Button, Col, message, Select, Row, Input } from 'antd'原创 2021-09-22 14:12:30 · 1315 阅读 · 0 评论 -
react+antd 动态编辑表格数据
react+antd 动态编辑表格数据react+antd 动态编辑表格数据小需求例子图片示例代码总结react+antd 动态编辑表格数据在项目中,我们会遇到一种需求,为用户提供一份表格去编辑,而且表格中各个单元格是相关影响的,因此在一个单元格中编辑过会影响另外一个单元格。小需求在一个表格中:1.有两行数据,一行是数据1,一行是数据2;2.而且只能数据1的单元格可以进行编辑;3.只能输入数字,要是输入其他的,则显示编辑之前的数值4. 当数据1的那行数据发生改变的时候,数据2对应的单元格的数原创 2021-09-17 10:54:54 · 2126 阅读 · 0 评论