ReactJs
文章平均质量分 63
以React基础为主,逐步深入React开发各个环节。
qing_小诺
这个作者很懒,什么都没留下…
展开
-
【Antd】DatePicker日期选择框设置disabledDate不可选择的日期
需要先引入moment。原创 2023-08-14 13:57:31 · 2043 阅读 · 0 评论 -
【React】Antd Select选择器多选设置最多只能选3个
起初是想在Select的onchange事件中判断values的数量,数量大于三个的时候来重新setFieldsValue。后来发现在Antd3X版本中 setFieldsValue方法不起作用,Select的值还是会一直增加。亲测好用,方法如下:就是在 onChange 事件中判断选中值的数量,如果大于3,则调用。应用场景描述:Antd3X版本,想要实现form中的 Select 多选最多只能选3个。3、方案3:validator(适用Antd3X、4X版本)原创 2023-01-13 15:58:35 · 3035 阅读 · 1 评论 -
【React】react-beautiful-dnd 拖拽排序功能的实现
如果 react 项目中需要用到拖拽功能,可以使用 react-beautiful-dnd 插件。点上图中的“All the examples!index.js代码如下:稍加改造就能直接用到项目中啦~~~原创 2023-01-11 13:27:50 · 1138 阅读 · 0 评论 -
【React】基础知识要点
react基础知识要点原创 2022-07-11 22:26:39 · 164 阅读 · 0 评论 -
【React系列教程一】React介绍、搭建React环境、运行React项目
一、React介绍:React 起源于 Facebook 的内部项目,可以开发单页面应用,组件化模块化开发。React通过对DOM的模拟,最大限度地减少与DOM的交互。二、搭建React开发环境之前的准备工作:1、必须安装nodejs稳定版本。nodejs官网:https://nodejs.org/en/2、安装cnpm,用cnpm替代npm。淘宝npm镜像:http:/...原创 2019-04-12 13:43:13 · 997 阅读 · 0 评论 -
【React系列教程二】项目目录介绍、创建和使用组件、绑定数据和属性、引入图片、循环数组
一、项目目录结构介绍:教程一中生成的reactdemo02项目,用VSCode打开,结构如下图所示:其中public\index.html是入口文件;public\favicon.ico是网站右上角的小图标;src主要是开发项目放的文件;src\index.js也是react的入口文件;src\App.js是一个根组件。首先看一下src\index.js入口js文件:impo......原创 2019-04-12 15:55:42 · 821 阅读 · 2 评论 -
【React系列教程三】定义方法、表单事件、双向数据绑定、键盘事件
一、定义和调用方法:在Home组件内定义run方法,在render中通过{this.run}来调用。在 React 中另一个不同是:不能使用返回 false 的方式阻止默认行为, 你必须明确的使用 preventDefault,例如下面的a标签。值得注意的是,通过 bind 方式向监听函数传参时,在定义的监听函数中事件对象 e 要排在所传递参数的后面。import React f......原创 2019-04-12 17:48:12 · 603 阅读 · 0 评论 -
【React系列教程四】defaultValue和value、React表单详解
这个时候实际上 input 的 value 根本不是用户输入的内容,而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。这里 value属性不再是一个写死的值,它是 this.state.username, this.state.username 是由 this.handleUsername 负责管理的。这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。...原创 2019-04-16 16:48:36 · 2773 阅读 · 0 评论 -
【React系列教程五】父子组件传值、defaultProps和propTypes
一、父组件给子组件传值(即子组件调用父组件数据和方法)1、在调用子组件的时候,定义一个属性 <Header msg='首页'></Header>2、子组件中通过 this.props.msg获取。 说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件。用这种方法还可以实现子组件给父组件传值,看下面第二条。二、子组件给.........原创 2019-04-17 14:11:48 · 3858 阅读 · 0 评论 -
【React】父组件获取子组件的值或方法
先来说下从哪获取的启发,想要从父组件获取子组件的值或方法。。。一次写代码的时候,用 Antd 中的 Modal 包裹了一个子组件,子组件中包含 input 输入框,想要在点击对话框上面确定按钮时(即Modal 自带的onOk方法),拿到其中输入的值,,,,下面用一个父组件(Father.js)和子组件(Hearder.js)来演示如何能拿到值和方法:方法一:给子组件添加属性...原创 2020-04-03 16:33:20 · 13772 阅读 · 0 评论 -
【React系列教程六】获取服务器api接口数据、用dangerouslySetInnerHTML解析html标签
react中没有提供专门的请求数据的模块,但是我们可以使用任何第三方请求数据模块实现请求数据。一、获取服务器api接口数据方法1:axios(https://github.com/axios/axios)axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域)1、安装axios模块【cnpm install axios --save】 / 【npm...原创 2019-04-17 16:17:56 · 931 阅读 · 0 评论 -
【React系列教程七】React生命周期
生命周期函数学习,必须记住的生命周期函数:*加载的时候:componentWillMount、 render 、componentDidMount(此时可放dom操作)更新的时候:componentWillUpdate、render、componentDidUpdate*销毁的时候: componentWillUnmount以下面的组件为例:import React fro...原创 2019-04-17 16:53:44 · 220 阅读 · 0 评论 -
【React系列教程八】React路由react-router的配置、路由传值、js跳转路由、路由模块化
一、react路由的配置:1、找到官方文档 https://reacttraining.com/react-router/web/example/basic2、安装 【cnpm install react-router-dom --save】3、找到项目的根组件引入react-router-dom import { BrowserRouter as Router, Ro...原创 2019-04-18 14:18:19 · 820 阅读 · 0 评论 -
【React系列教程九】React的UI框架Antd的使用及更新
一、React中使用Antdantd官网:https://ant.design/docs/react/introduce-cnstep1:安装antd :【cnpm install antd --save】/ 【 yarn add antd】step2:在react项目的css中引入antd的css: @import '~antd/dist/antd.css';...原创 2019-04-19 16:22:48 · 4341 阅读 · 0 评论 -
【React】Antd实现表格序号递增
直接上代码:const columns = [ { title: '序号', dataIndex: 'index', render:(text,record,index)=>`${index+1}`, }, //...];原文地址:https://www.cnblogs.com/shenyi/p/11983918.html...原创 2020-03-10 20:20:45 · 2310 阅读 · 1 评论 -
react 使用antd后ie11不能正常访问的解决办法
step1:安装 react-app-polyfill【npm i --save react-app-polyfill】step2:修改 package.json 文件,在指定位置添加 "ie 11",如下图:step3:在入口文件index.js文件的头部添加两行代码(貌似不加也行):import 'react-app-polyfill/ie11'import 'react-app-polyfill/stable' 然后重启项目,在ie中访问即可看到页面。...原创 2021-04-30 10:43:56 · 1448 阅读 · 0 评论 -
【React】使用脚手架搭建的项目使用less文件
使用create-react-app脚手架工具搭建的项目中,使用less文件运行不会报错,但是样式会无效。原因:create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成。解决:step1:安装less和less-loader插件包:【npm install less less-loader --save-dev】step2:新建项目一般默认不显示config目录的,需要执行:【npm.原创 2020-08-11 15:20:18 · 846 阅读 · 1 评论 -
【React】解决antd中,select和DatePicker组件不跟随页面滚动的问题
解决方案:1、在Select组件中:添加“getPopupContainer={triggerNode => triggerNode.parentNode}” ,使其固定在父元素中<Select getPopupContainer={triggerNode => triggerNode.parentNode} defaultValue="lucy" styl...转载 2019-06-05 19:42:04 · 5765 阅读 · 4 评论 -
【React】查看和升级版本
1、查看react版本当前开发项目的react版本从哪里看呢?其实就在package.json文件中,你搜索"react",即可看到版本号:2、更新到最新版react通过查看react更新日志(链接是:https://github.com/facebook/react/blob/master/CHANGELOG.md),发现现在最新版是16.8.6,我们现在把他更新到这个版本...原创 2019-05-08 15:49:05 · 18783 阅读 · 3 评论 -
【React】实现锚点功能、点击按钮到顶部
先看需要实现的效果图:实现方法:给标签添加id属性(往哪跳,就给哪个标签加),然后用下面的scrollToAnchor方法,废话不多说,直接上代码:import React, { Component } from 'react';class ComA extends Component { constructor(props) { super(props);...原创 2019-04-24 17:04:33 · 2971 阅读 · 0 评论 -
【React】开箱即用的中后台前端 - Ant Design Pro
官方文档:https://pro.ant.design/index-cn用Ant Design Pro可以快速搭建一个后台前端页面。搭建步骤:step1:新建项目文件夹,cd到项目下,然后执行【yarn create umi】或者【npm create umi】,按下两次回车键,依次是选择Ant Design Pro和选择语言,如下图:step2:安装依赖:【npm i...原创 2019-09-26 14:39:45 · 688 阅读 · 0 评论