react
马娟
这个作者很懒,什么都没留下…
展开
-
react hooks更新、刷新子组件
import React, { Fragment, useEffect, useState, } from 'react';import { Tabs, Button,} from 'antd';import { connect, history } from 'umi';import Cmp1 from './components/cmp1';import Cmp2 from './components/cmp2';import Cmp3 from './components/cmp3原创 2021-02-05 19:38:43 · 7448 阅读 · 0 评论 -
react hooks form搜索框、弹窗表单封装
form.js组件import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';import { Modal, Form, Input, Button, Row, Col, Radio, Select, Cascader, DatePicker, InputNumber, TreeSelect, Switch, Checkbox, Slid原创 2021-02-05 13:15:16 · 1584 阅读 · 0 评论 -
form表单,校验未通过不可以点击提交按钮或置灰提交按钮
1.antd里form表单需要点击提交按钮后才校验,如果想在这之前校验,可以通过获取值自定义校验是否满足。//点击提交前校验form表单是否都通过hasErrors=()=>{const{photosList}=this.state //photosList为上传图片的数量constfieldsValue=this.props.form.getFieldsValue();consterrArr=Object....原创 2020-07-08 16:16:55 · 6860 阅读 · 0 评论 -
antd表格使用ellispsis:true超出显示省略火狐兼容问题
使用antd中的ellispsis:true实现超出显示省略…时,火狐中不兼容其他浏览器火狐解决方案:在css中加入//兼容火狐超出显示....ant-table-row-cell-ellipsis a{ display: block; width:100%; overflow: hidden; white-space: nowrap; -o...原创 2020-01-07 11:31:43 · 1344 阅读 · 2 评论 -
react中引入高德地图
1.在index.html中引入js <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key='您申请的高德key值'"></script>2.在要使用的页面定义const AMap = window.AMap;//必须先这样定义,否则无法直接使用ne...原创 2019-07-22 16:53:25 · 1921 阅读 · 0 评论 -
echarts显示面积图代码
效果图:import React,{ Component } from 'react'var echarts = require('echarts');var myChart ;class SmoothLineChart extends Component{ constructor(props){ super(props) this.state = { ...原创 2019-07-22 15:46:56 · 1504 阅读 · 0 评论 -
react在rc-form中如何获取ref
import React, { Component } from 'react'import { InputItem } from 'antd-mobile';import $ from 'jquery'class Input extends Component{ constructor(props) { super(props); this.stat...原创 2019-05-31 15:33:18 · 1514 阅读 · 0 评论 -
forceRefresh控制react-router跳转的时候刷新页面或不刷新页面
实现代码:import React from 'react';import { BrowserRouter, Route, Switch } from 'react-router-dom';import Loading from '../components/loading' //loading组件import HomePage from '../pages/homePage' //...原创 2019-04-09 16:40:14 · 5478 阅读 · 2 评论 -
react、vue项目手机端安装vConsole开发调试工具
react项目中1.在<head>中引入vconsole.min.js2.new Vconsole实例化 <head> <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js" type="text/javasc...原创 2019-04-08 10:36:37 · 5274 阅读 · 0 评论 -
微信、钉钉、浏览器上H5页面头部标题(title)的修改
前言:本方法主要是针对微信、钉钉、手机上浏览器上的H5页面,用于修改其头部的标题。1.微信内问题分析:主要是因为微信在首次加载页面初始化title后,就再也不监听 document.title的change事件。解决思路:给页面加上一个内容为空的iframe,随后立即删除这个iframe,这时候会刷新title。代码:export const ChangePageTitle = ...原创 2019-04-10 17:03:11 · 14086 阅读 · 3 评论 -
react里 render双层循环写法
&lt;List className="tbBox"&gt; &lt;Flex className="title"&gt; {data.map(item =&gt; ( &lt;Flex.Item原创 2019-03-11 18:53:07 · 4112 阅读 · 0 评论 -
antd-mobile中无法调用Picker、inputItem、datePicker等组件中的onChange回调函数
问题描述:使用antd-mobile+rc-form做表单时,发现Picker等组件中的onChange回调函数用onChange={this.onChange}无法触发,封装的子组件无法像父组件传值。注意:此处只是针对onChange的回调函数,其他回调函数依旧可以正常使用,因为,rc-form会获取onChange事件的变化来更新form表单里的值,导致此处像往常一样用onChange...原创 2019-03-07 17:07:40 · 4308 阅读 · 0 评论 -
react或vue项目内引入weixin-js-sdk
1.安装npm install weixin-js-sdk2.装载2.1 vue项目中引入main.js中import wx from 'weixin-js-sdk'Vue.prototype.$wx = wx //挂在vue的实例上调用this.$wx.config(...)2.2 react项目中引入import wx from ...原创 2019-02-28 16:36:07 · 2823 阅读 · 0 评论 -
vue、react、angular的区别
文档正在不停完善中,欢迎各位提建议和修改错误。 vue2.0 react angular2 angular(官方不维护了) 基础 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 作者 尤雨溪 Facebook Googl...原创 2018-10-24 11:50:46 · 920 阅读 · 0 评论 -
react+antd中DatePicker组件(不能选中当前时间以前的时间)的代码
前言本文章主要功能是实现不能选中当前时间以前的时间:即不能选中此刻之前的时间,比如此刻是2018年10月11日15:18,那么2018年10月11日15:18分之前的所有时间都不能选,包含时分。 如有疑问,欢迎留言交流!代码const { DatePicker, Row } = antd;class limitTime extends Component{ state={...原创 2018-10-11 15:20:17 · 7594 阅读 · 1 评论 -
create-react-app搭建react项目
1.全局安装create-react-appnpm install -g create-react-app2.创建项目create-react-app 项目文件夹名3.进入项目3.1 cd 项目文件夹名创建之后的项目目录3.2运行项目npm start 或npm run start打开http://localhost:3000/查看运行成功后...原创 2018-09-11 10:44:39 · 2809 阅读 · 0 评论 -
react调试工具react -devtools的安装
前言 react-devtools是什么? react-devtools是一款由 facebook 开发的有用的 Chrome浏览器扩展。通过它我们可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。安装React Devtools有两种方法:方法一:chrome商店上直接下载(前提是该电脑已经翻墙)。 ...原创 2018-10-11 15:07:55 · 4153 阅读 · 0 评论