![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 88
初学者↑
精于基础,广于实现
展开
-
基于 React + AntDesign4.x 实现的可编辑表格,可满足大部分使用场景
可编辑任意单元格,单元格类型可选:输入框、单选框、下拉列表、分组下拉列表属性列表参数说明类型默认值style覆盖样式Object{}columns表格列Array[]onChange单元格内容修改回调function(Object)-isAddRow是否允许新增行booleantrueisDeleteRow是否允许删除行booleantrueisSelectRows是否显示勾选框booleantrueisSe原创 2021-01-25 17:19:45 · 3718 阅读 · 2 评论 -
基于AntDesign实现的React.js自定义可编辑表格,带翻译功能
基于React+AntDesign实现的一个自定义的可编辑表格,主要用于数据库表字段的编辑、带翻译功能,稍作修改后也可复用到其他地方。主要包括三个文件:index.js,EditableTable.js,EditableTable.less,其中图标是使用的www.iconfont.cn上面的,接入了百度翻译的API效果图:具体代码如下index.js:import React, { Component } from "react";import EditableTable from "@/p原创 2020-05-29 11:39:53 · 2092 阅读 · 0 评论 -
由JS在对象数组循环过程中修改对象属性所导致的问题谈到对象的浅拷贝和深拷贝
最近在工作中用React.js写前端,接触了很多JS的东东,在做数组嵌套循环的时候发现一个问题:我的需求是想把arr1和arr2添加到resultArr 中,并且给arr2分别添加index属性为arr1的idnex值。代码如下:const arr1 = [{ id: 1, name: 'a', index: 0 }, { id: 2, name: 'b', index: 1 }];const arr2 = [{ id: 3, name: 'c' }, { id: 4, name: 'd' }];原创 2020-05-12 17:31:38 · 1581 阅读 · 0 评论 -
React生命周期
一、React组件生命周期1、constructorconstructor参数接受两个参数props,context可以获取到父组件传下来的的props,context,如果你想在constructor构造函数内部(注意是内部哦,在组件其他地方是可以直接接收的)使用props或context,则需要传入,并传入super对象。constructor(props,context) { ...原创 2019-03-29 10:16:21 · 173 阅读 · 0 评论 -
React基础知识(7)——React 列表 & Keys
一、列表我们可以使用 JavaScript 的 map() 方法来创建列表。import React from 'react';export default class Home extends React.Component { render() { const numbers = [1, 2, 3, 4, 5]; const listItems =...原创 2019-03-26 15:51:39 · 282 阅读 · 0 评论 -
React基础知识(6)——React 事件处理
React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:React 事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法)HTML 通常写法是:<button onclick="activateLasers()"> 激活按钮</button>React...原创 2019-03-26 15:49:40 · 140 阅读 · 0 评论 -
React基础知识(5)——React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。一、使用 Props以下实例演示了如何在组件中使用 props:import React from 'react';function HelloMessage(props) ...原创 2019-03-26 15:45:55 · 162 阅读 · 0 评论 -
React基础知识(4)——React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。在app/home/index.js中的添加如下代码,在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函...原创 2019-03-26 15:43:55 · 242 阅读 · 0 评论 -
React基础知识(3)——受控组件与非受控组件
通过学习《第一个组件》这一节,相信你已经理解了 props 和 state 的区别。这一节,我们会介绍 “受控组件”和“非受控组件”这两个概念。非受控组件我们首先看一个简单的例子,现在有一个输入组件。const MyInput = ({ onChange }) => ();上面这个组件会显示一个输入框,每次有用户输入,就会调用传入的参数 onChange。然后,将这个组件放入H...原创 2019-03-26 15:41:33 · 182 阅读 · 0 评论 -
React基础知识(2)——第一个组件
本节主要解释什么是组件,以及怎样写组件。这是 React 和 Ant Design 的使用基础,只有学会了这些内容,才能理解后面的知识。如果你对 React 已经有所了解,可以跳过这一节。组件的概念按照功能划分,一张网页可以由多个互相独立的功能单位组成,这种功能单位就叫做“组件”(component)。比如,典型的网页分成页头、内容、页尾三个部分,就可以写成三个组件:Header、Conten...原创 2019-03-26 15:39:47 · 167 阅读 · 0 评论 -
React基础知识(1)——前端开发的演变
本文介绍前端开发的历史和趋势,帮助大家了解 React 要解决什么问题。静态页面阶段互联网发展的早期,网站的前后端开发是一体的,即前端代码是后端代码的一部分。后端收到浏览器的请求生成静态页面发送到浏览器那时的前端页面都是静态的,所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能,脚本的作用只是增加一些特殊效果,比如那时很流行用脚本控制页面上飞来飞去的广告。那时的网站开发,采...原创 2019-03-26 15:38:01 · 208 阅读 · 0 评论 -
React从零开始——一个详细的范例
范例说明接下来我们要通过一个简单的案例,详细的学习React的内容如上图所示,两个按钮,点击加号按钮,数字加一,点击减号按钮,数字减一代码结构使用create-react-app创建一个工程,将其中的代码结构删减到最简单的模式修改index.jsindex.js中的代码就很简单了,只要引入App组件,执行渲染即可import React from 'react';import ...转载 2019-03-13 09:44:29 · 6304 阅读 · 0 评论 -
React使用ant时设置DatePicker日期控件中文显示
方式一:局部设置import 'moment/locale/zh-cn';import locale from 'antd/lib/date-picker/locale/zh_CN';//调用时引用locale<DatePicker format="YYYY-MM-DD" placeholder="" locale={locale}/>方式二:...原创 2019-03-13 09:39:15 · 7243 阅读 · 0 评论