![](https://img-blog.csdnimg.cn/20210802163004773.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
React
BasicLab基础架构实验室
本人深耕基础架构领域,曾在国内500强大厂研发企业级百亿量级吞吐中间件,擅长Java语言、Go语言、Python语言、C语言、NodeJS、Web、Linux、深度学习、大数据、云原生等
展开
-
React onClick/onChange 传参 (bind绑定)
一般是通过bind 函数绑定 this,来传递参数的,没有参数就是下面这种方式或者直接写函数名,代码如下://被触发函数写法:const onChange = (e) => { //操作}onChange={onChange}oronChange={onChange.bind(this)}有参调用,代码如下://被触发函数写法:const onChange = (index, e) => { //操作}传值调用...原创 2021-10-21 15:55:58 · 2966 阅读 · 0 评论 -
React 混合中英文计算字符长度
最近项目中需要计算混合中英文的字符长度,用来做表单校验,特此记录便于日后查阅。//判断是否是中文const isChinese = (str) => { let lst = /[u00-uFF]/; return !lst.test(str);};//中英文混合计算字符长度export const strlen = (str) => { let strlength = 0; for (let i=0; i < str.length; ++i)...原创 2021-10-18 10:20:56 · 925 阅读 · 0 评论 -
React 自定义表单校验规则
最近项目中需要自定义表单的校验规则,特此记录便于日后查阅。<Form.Item label="分类名称" name="name" rules={[ {required: true, message: '请输入分类名称'}, { validator: (_, value) => { return value.length > 20 ? Promise.reject('分类名称不能超过20个字符') : Promis...原创 2021-10-18 10:18:24 · 3278 阅读 · 0 评论 -
React 实现图片裁剪/上传/预览/下载/删除(主要是图片裁剪)
最近工作中需要封装一个图片裁剪组件,也是封装了两天时间才完成,特此记录便于日后查阅。 先看一下最终效果,图示如下: 裁剪之后的图片可以预览,下载,删除,然后我们来看看代码: 1、UploadCutImage.jsximport {message, Modal, Upload} from 'antd';import React, {useEffect, useState} from 'react';import {Del...原创 2021-10-14 18:16:14 · 3663 阅读 · 0 评论 -
JS 获取图片的原始尺寸
如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢?#oImg{ width: 100px; height: 100px;}<img src="images/test.jpg" id="oImg" alt="">方法一:HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高。这两个属性在Firefox/C...原创 2021-10-14 17:05:43 · 3248 阅读 · 0 评论 -
Node 裁切图片的方法
1、安装 jimp $ npm install --save jimp2、读取本地图片切图jimp.read('本地图片地址', function (err, img) { if (err) throw err img .crop(x坐标起点, y坐标起点, width最终图片宽度, height最终图片高度) .write(result)})3、读取http图片,转成buffer,切成buffer...原创 2021-10-14 10:47:02 · 1550 阅读 · 0 评论 -
React Antd 中如何修改覆盖默认样式及样式引用
如何覆盖antd的默认样式step.1 通过浏览器调试面板,找到需要修改的样式class 名如下所式.ant-time-picker-inputstep.2 添加自定义样式mystyleindex.less样式文件中添加如下样式.mystyle :global(.ant-time-picker-input) { width: 120px;}step.3 如何在 component组件中引用自定义样式import styles from '../index.less..转载 2021-10-11 11:27:43 · 2815 阅读 · 0 评论 -
Ant Design使用<Form.Item>的defaultValue值不能更新的问题
这个是官方的Bug,改两个东西,一个是在<Form.Item>中加一个唯一key(这个key唯一代表一个组件,名称不能重复),另一个要改的地方是在<Form.Item>下面加一个<input hidder={true} value={default_value}>,然后就可以刷新这个初始默认值了,代码如下:<Form.Item {...field} name={[field.name, item['param_code']]} fieldKey={原创 2021-08-26 17:00:57 · 2061 阅读 · 2 评论 -
React Parameter ‘from‘ implicitly has an ‘any‘ type.
报错:Parameter 'from' implicitly has an 'any' type.解决方法tsconfig.json添加"noImplicitAny": false,或者 “strict”: true,改为false{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "e原创 2021-08-13 14:54:13 · 570 阅读 · 0 评论 -
React Cannot use JSX unless the ‘--jsx‘ flag is provided.
在tsx文件中加入html代码后,报错Cannot use JSX unless the '--jsx' flag is provided.解决方法:在tsconfig.json中加入:"jsx": "react",到此问题解决。原创 2021-08-13 14:52:05 · 808 阅读 · 1 评论 -
React 项目使用 switch ... case ... 语句
最近项目中需要使用到switch...case...语句,但不知道在React中怎么使用,特此记录便于日后查阅。 但是不得不说 switch 是个好东西,比 if else 好用的多,但是一定要记住,react是必须要返回的,如果没有 返回null也是可以的,否则一定会报错。import React from 'react';import './index.less';export default class Life extends React...原创 2021-07-17 14:31:59 · 1492 阅读 · 0 评论 -
React Input onchange事件第二次不执行的解决办法
Input onchange事件第二次不执行,问题的根源在于没有发生任何改变,因为绑定的是onchange事件,如果事件的对象没有发生改变,那么事件是不会执行的。当第二次选择文件和第一次选择的文件相同的时候,input的value值是一样的,在js看来就是没有变化,里面的值跟之前还是一样。所以就出现了问题的出现。要解决这个问题,可以在onchange事件执行完之后,清空input的value值,当第二次再选择相同的文件时,里面的value从空值变为任何值,都是一个改变的过程,所以就不会存在事件不执行的问原创 2021-04-29 14:54:21 · 1697 阅读 · 0 评论 -
React Ant Design 的表格默认选中
在使用 ant design 的表格时候使用默认选中项, 需要配置的 Table 的 rowSelectionconst rowSelection = { type: 'checkbox', getCheckboxProps(record) { return { defaultChecked: record.id == 0 // 配置默认勾选的列 } }}可以参考 ant design 的 GitHub 回复链接...原创 2021-03-01 14:51:31 · 4412 阅读 · 6 评论 -
React Router this.props.history获取传值的方式
待跳转页面:this.props.history.push({pathname: '/RftAddContact',param: {key:remindData,}})跳转目标页面:const params = this.props.location.query.remindData;到此history获取传值的方式介绍完成。...原创 2021-02-28 23:12:35 · 2827 阅读 · 0 评论 -
Ant Design使用Form.useForm()获取数据域报错
Ant Design框架下在使用Form.useForm()获取数据域出现如下错误:Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the rend原创 2021-01-05 14:04:21 · 7011 阅读 · 5 评论 -
React input defaultValue不会更新状态怎么办?
解决这个问题的方法是改变key输入,代码如下:<input ref="text" key={this.state.awayMessage ? 'notLoadedYet' : 'loaded'} onChange={this.onTextChange} defaultValue={awayMessageText} />应该是react的bug吧,反正问题是解决了。...原创 2020-12-28 17:53:12 · 1567 阅读 · 0 评论