react
文章平均质量分 52
Richard Yates Boy
盡可嬉戲玩鬧棒球帽
展开
-
封装一个可回车事件,不能输入配置项options没有的值的AutoComplete
但是我们可以追踪到AutoComplete组件的源码,虽然并不能看很懂,但是可以看出组件是InternalSelectProps,RefSelectProps的共同构成,这里就不探究dataSource结构了。当CustomAutoComplete外面包裹着form表单时候,虽然CustomAutoComplete的值清空了,但是form表单给CustomAutoComplete的那个绑定name并没有清空,如何能让form表单绑定name也对应清空,目前我还没想出办法,也许可能要改造form表单,心累。原创 2024-03-25 16:16:01 · 325 阅读 · 0 评论 -
在web页面实现代码编辑器
使用此技术,您可以将文件与路径对应起来,并创建一个完全多模型的编辑器。突然想起来之前一个需求,就是web页面画一个能输入代码的框子,这个我也找了好几个库,比如codemirror,不知道这个库是不是没有更新了还是怎么,怎么都下不下来依赖,最后选择了monaco-editor。产品一开始是希望输入代码还能出提示,出报错,就跟ieda,vscode那样,那不是痴人说梦,哪个在线运行代码能做到这样,连依赖都不确定,就给你报错,Java,Python都不可能给你语法报错的,只有js可能会报个语法错误。原创 2023-06-13 15:48:32 · 1100 阅读 · 0 评论 -
使用braft-editor实现简易版即时写文档并预览的富文本编辑器
最近在看各个富文本编辑库的时候,有点好奇,于是对比了一些,有draft-js,Slate.js。但是这些基本都是英文库,简单demo无法满足需求,比如插入截图和表格,这些复杂结构的数据,实现这些,必须自定义扩展,要想做到这些,通读一遍文档基本是必须,且内含的天坑,估计也是数不胜数。也不错,当然人家是吃这口饭的,就单独说插入表格这个吧,(浅吐槽一句csdn写文章的插入表格都还蛮low的)还有插入模板,语雀做的非常棒了,选中表格也能即时删除某列,更别说插入模板了。的文档就做的蛮好的,原创 2023-06-12 15:52:23 · 1669 阅读 · 0 评论 -
关于echarts的N个图表N条线N种单位的封装
echarts封装,N图N线N轴原创 2023-01-30 13:31:51 · 301 阅读 · 1 评论 -
antd实现tree动态增删改和拖拽效果
react antd tree组件原创 2022-11-21 17:35:40 · 1244 阅读 · 2 评论 -
antd Upload上传实现自定义上传
众所周知,Upload上传有个action的坑,就是你选择文件之后自动调用地址然后就会执行上传接口,这在某些情况的却是很好用的一个组件。但是如果要实现自定义的上传,如下图所示,就要阻止默认上传的事件。现在我们要实现点击保存按钮才进行上传,所以我们就需要在beforeUpload这个钩子函数里面阻止默认上传。 beforeUpload: file => { const fileType = file.name.split('.').pop(); if原创 2021-12-29 14:55:12 · 6498 阅读 · 0 评论 -
对象属性过滤,基于antd 表格 Form 食用
当我们在使用antd 的 form 组件时候 是不是想一口气得到所有表单的值 然后传给接口就完事了, 但是某些表单并非必填项 ,这就需要我们过滤掉一些值为"",undefined,null的数据了。const objectPropertyTransfer = obj => { if (!obj || !typeof obj === 'object') return; const keys = Object.keys(obj); for (var key of keys)原创 2021-09-15 15:07:33 · 262 阅读 · 0 评论 -
使用react-beautiful-dnd进行拖拽
使用:npm i react-beautiful-dnd在项目组件中使用如下:class组件代码:import React, { Component } from "react";import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; //初始化数据const getItems = count => Array.from({ length: count }, (v, k) => k原创 2021-03-01 15:47:21 · 1099 阅读 · 7 评论 -
antd ProTable 高级表单实现行编辑表格(能直接用调用接口那种)
代码全部如下:import React, { useState } from 'react';import { EditableProTable } from '@ant-design/pro-table';import ProField from '@ant-design/pro-field';import { ProFormRadio } from '@ant-design/pro-form';import ProCard from '@ant-design/pro-card';import原创 2020-12-23 18:50:47 · 8170 阅读 · 10 评论 -
antd 高级表单使用报错解决
因为之后有分布表单的需求,所以今天抽空就看了看例子,照着官方文档把那些需要的包安装导入完成后,发现一直报几个大错,页面一直空白,报错如下我是把需要的包安了装装了安都不好使,最后把antd这个包重新安装才可以的。我的antd的版本是4.4.0,升级之后是4.9.4,然后就可以了,这他娘的真是坑死人了。...原创 2020-12-22 16:34:58 · 1492 阅读 · 0 评论 -
react antd锚点自定义样式,图标
在页面导航里经常会看到这种样式的组件,antd里面有锚点和时间线可以办到,今天我主要使用锚点完成这种特效,但官方锚点的样式和那个小圆点是在太丑了啦,这里需要自己修改样式代码如下:import React, { useState, useEffect } from 'react';import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';import { Anchor } from 'antd'.原创 2020-12-21 17:12:58 · 2333 阅读 · 7 评论 -
关于antd table展开行expandable的坑和解决办法
最近遇到了antd 表格展开行的需求,然后遇到了非常恶心的事情,首先官方文档中只有expandedRowRender可以渲染组件,此为渲染层,这个属性方法有四个参数function(record, index, indent, expanded),分别为当前行,下标,缩进,当前行状态(true为展开,false为关闭)。这个方法点击每个展开行都会执行一遍,默认不管是关闭和打开。然后我的需求是点击展开行要用到当前行id去请求一个接口渲染图表,此为异步操作,我一开始不想请求数据的逻辑写在expandedRow原创 2020-12-14 16:11:33 · 14025 阅读 · 0 评论 -
react antd select 下拉框实现可选择可自由输入
import React from 'react';import { Button, List, Avatar, Select } from "antd";const fontSizeArr = [ { value: 8 }, { value: 10 }, { value: 12 }, { value: 13 }, { value: 14 }, { value: 16 }, { value: 18 }, { value: 20 }, { value: 24 },原创 2020-12-02 16:40:07 · 6885 阅读 · 4 评论 -
react中给antd design表格中title加上tooltips提示
如果表格中有很多状态展示,这时候可以在表格title中加上tooltips提示。antd 官方文档中表格的Column已经早就有了api代码如下:表头tooltips提示效果:原创 2020-11-09 15:52:47 · 1523 阅读 · 0 评论 -
antd 穿梭框的用法
效果如图使用: const [mockData, setMockData] = React.useState([]); const [targetKeys, setTargetKeys] = React.useState([]);const searchData = () =>{ QueryCache().then(res=>{ console.log(res); const userArray = res; const us原创 2020-11-03 16:30:56 · 4965 阅读 · 3 评论 -
echarts甜甜圈中插入自定义图片和鼠标悬浮不放大效果,和甜甜圈瘦身效果
效果如图:代码如下:{ tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, graphic: { elements: [ { type: 'image', style: { image: "https://gitee.com/Frankenstein4原创 2020-09-17 18:40:53 · 675 阅读 · 1 评论 -
在antd design pro 项目里使用iconfont图标
因为antd 官方的一些图标无法满足开发需求,需要在矢量图标库里引入一些图标,但是怎么导入pro项目呢,很简单。首先在矢量图标库生成自己的图标库链接,接着在pro项目中的defaultSetting.js里面修改iconfontUrl,如下接着在config.js文件的路由那块加上自己的图标就可以了。...原创 2020-09-04 17:13:42 · 1256 阅读 · 4 评论 -
react hook 父子组件传值示例
我司现在技术栈是react,用的是开箱即用的pro,我个人习惯用函数式组件,所以用hook比较多。现在写个父子组件传值的示例,希望能帮助到你。父组件:import React, { useState,createContext} from "react";import Counter from './index1'const myContext = createContext();function App() { const [count, setCount] = useState(0)原创 2020-08-26 14:02:40 · 2538 阅读 · 3 评论 -
ant design pro 踩坑之路
新入手react 我司要用蚂蚁金服那个框架 从头开始熟悉。慢慢踩坑之路。实时更新1.使用静态文件资源 <img src={require('../assets/picture.png')} />2.关闭自带eslint检查找到package.json 文件 删除里面的 “pre-commit”: “npm run lint-staged”3.proxy代理proxy里面的代理的千万不要和你的地址里面的东西冲撞了'/devApi': { target:'http:原创 2020-07-24 11:59:28 · 1249 阅读 · 0 评论