莉兹Liz的博客

// 脚手架搭建项目create-react-app react_democd react_demo// 引入antdyarn add antd// 引入lessyarn add less less-loader --save-devyarn add customize-cra// 安装axiosyarn add axios// 安装react-routeryarn add react-routeryarn add react-router-dom// 安装reduxyarn a

需求checkbox多选框最多选中两个，选中两个后其余选项置灰；取消一个或两个选项后，所有项可选。在网上找了一下，有这个需求但是没有实现，于是这里重写了一下，方便以后使用。操作1、选中一个选项2、选中两个选项，此时已选两项，未选项置灰3、取消一个选项，此时所有选项可选代码/** * checkout多选，最多选中两个，其余选项不可点击；取消选中后的项，所有选项可点击 */import React, { Component } from 'react';import { Chec

React HooksHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。分类useState State Hook，定义、修改state值，同this.state。例：import React, { useState } from 'react';// 定义Statefunction demo() { const [age, setAge] = useState(18); const [fru

constructor()初始化state创建refimport React, { Component } from 'react';class demo extends Component { constructor(props) { super(props); this.state = { dataSource: [] } this.xxRef = React.createRef(); } render() { const { name } = t

问题在使用AntD使用Form表单DatePicker时间组件的时候，测试意外测出一个历史bug，很神奇，时间会差一天！直接使用Form表单并提交时间会显示时间是Object类型，选择2020-11-30，保存的时候会变成2020-11-29xxx（具体时间后缀），可能是时间组件为英文的原因？转换为中文后日期还是没有转过来，就差了一天……解决保存时用方法转一下日期if(typeof(item.date) === 'object') { item.date= moment(new Date(it

问题AntD的Table表单是我经常使用的一个组件，在使用的时候经常会遇到以下几种key缺失问题：接口没有传key、id接口传了id但未转换为key接口传的id不唯一（一般传了就会唯一）导致以下报错：Warning: Each child in a list should have a unique “key” prop.解决办法方法一找后端同学，传key！或者传id！！传key后直接获取dataSource的值就行了；传id需要前端处理一下，在table组件中加个rowkey。&

方法1简单粗暴，直接数有多少行是重复数据，index%重复总数 === n，最上面是0，下面依次是从第几行开始需要重复数据的行数。import React from 'react';import { Table } from 'antd';class tableInfo extends React.PureComponent { constructor(props) { super(props); this.state = { columns: [{ title:'姓名',

<Row className="c-row"> <Col className="c-col"> <span className="red-star">*&nbsp;</span> <span className="c-title">商家联系人</span> </Col> <Input placeholder="请输入名称" className

import React, { Comporment } from 'react';import { Popover } from 'antd';import { QuestionCircleOutlined } from '@ant-design/icons';<Popover content={<div style={{ width: '117px', height: 'auto', fontSize: '12px', lineHeight: '17px',

默认全不选，鼠标移入卡片上，卡片外框变色点击卡片实现选择效果，选择框实现半选功能，同时记录数量点击选择框，变为全选，再点击，全不选/** * demo */import React, { Component } from 'react';import { Checkbox, } from 'antd';import './index.css';import { CheckCircleFilled } from '@ant-design/icons';class Demo ext

需求：父组件中Table表单中添加一个按钮，点击按钮弹出子组件Table表单，子组件表单中也有功能按钮，实现功能后刷新子组件页面。/** * 子组件 */import React from 'react';import { Table, Modal, Button, message } from 'antd';import './index.less';import * as http from './httpServer';class Son extends React.Componen

报错信息当时没记下来，只记得情景。业务代码不好粘贴，直接写几个demo值，没加样式等，简单模拟。import React from 'react';import * as http from './httpServer.js';class Demo extends React.PureComponent { constructor(props) { super(props); this.state = {} } componentDidMount() { let id = se

// 父组件import React from 'react';import { Button } from 'antd';import Children from './Children/index';class Father extends pureComponent { constructor(props) { super(props); this.state = { a: 1 } } handleClick = () => { this.setStat

import React from 'react';import { useHistory } from 'react-router-dom';import { PoweroffOutlined } from '@ant-design/icons';import './index.css';export default function HeaderUser() { let history = useHistory(); function handleLogin() {

项目报错，把项目中node_modules删除重新npm install安装，又npm start 启动还是报错。PS D:\zsy_subway\zsy_subway_fe> npm start> zsy_subway_fe@0.1.0 start D:\zsy_subway\zsy_subway_fe> react-app-rewired startrequire...

如图，想在Table表单中的描述后面加上Icon图标和气泡提示Tooltip，第一时间找了AntD文档，找到搜索功能及相应图标（filterDropdown和filterIcon），也在百度上找到https://www.jianshu.com/p/b67ca05cf380使用办法（不推荐）。但是好麻烦啊，又要加函数又要写多行代码，出来后的效果也不好看，于是就自己乱写&fs%W3q……...

背景planSearchList是列表函数，在点击删除按钮后想再调用一下列表接口，直接用了this.planSearchList(); // 计划删除 deletePlan = planNo => { Modal.confirm({ title: '温馨提示', content: '是否确认删除计划，删除后不可恢复'...

首先AntD官网https://ant.design/docs/react/introduce-cn目前版本4.x，公司项目版本3.x，论文使用4.x（用最新的技术，做最靓的崽儿~）npm install antdnpm install react-app-rewired customize-cra//修改/* package.json */"scripts": {- "sta...

前端部分搭建脚手架create-react-app demo引入Less样式https://blog.youkuaiyun.com/qq_40138556/article/details/104969101

前端只下载，后端负责数据// buttonclass ExportExcel extends PureComponent { constructor(props) { super(props); this.state = { dataSource: [], columns: [ { ...

React官网https://zh-hans.reactjs.org/docs/react-component.html挂载constructor()static getDerivedStateFromProps()render()componentDidMount()更新static getDerivedStateFromProps()shouldComponentUpdat...

需求现在要实现这么一个功能，点击餐饮按钮，弹出弹窗，弹窗上根据男生和女生，下载不同模板，填写模板，上传不同的三餐规划及需求，根据上传的资料调用接口分析，得到食物种类数量foodTypeNum和几顿饭mealNum，有值就展示“资料确认 共n中食物种类，n顿餐”，否则隐藏。重点：选男生时，上传资料，解析后显示资料名称等信息，资料确认显示；切换女生时全部信息为空；再切回男生仍是刚刚上传的资料和解析...

page1跳转到page2，带参数name和age，刷新后sessionStorage保证数据仍存在。//page1fun1 = () => { let key = { name: this.state.name, age: this.state.age } sessionStorage.setItem("page2", key); this.props....

回退上个页面React 不保存数据this.props.history.goBack();浏览器原生window.history.back();React-Router、Redux 保存短数据数据存储在location的query里，就是URL的问号后面的参数列表，同时在请求数据的 actionCreator 里，既要向服务器发送 query 里对应的请求参数，也要在返回的 act...

React组件构成输入：props自己的状态：state输出：renderReact组件的定义方式React组件的定义方式一共有四种，环境支持ES6，使用Component;环境不支持ES6，使用createClass;组件没有自身状态，使用Functional Component;组件是纯组件，使用PureComponent。createClass几乎不用了。var React ...

什么是mockAPI？在项目中我们经常会一些数据来模拟需求，这些数据通常被存储在state中，但是随着数据量的增多，我们需要数据库来存储这些数据。对于不会连接数据库（例如我这样的萌新），以及觉得连接数据库比较麻烦的人，可以使用工具来模拟数据来实现需求。下面我会主要介绍mockAPI工具来模拟数据。mockAPI文档中已经详细介绍了其使用方法，在这里我写一下我的使用步骤：一、安装axios...

React脚手架搭建安装node和npmnode官网下载：Node.js 中文网安装node后npm自动下载全局安装create-react-appnpm install -g create-react-app创建项目create-react-app 项目名称这里我创建的项目名称为democreate-react-app demo项目截图其中App.js是项目的初始组件...