React
关注
分享
扫一扫
zuo_zuo_blog
这个作者很懒，什么都没留下…
展开
-
antd的input输入框超出内容划过显示完整提示
<Tooltip placement="bottom" title={ <span style={{ color: '#979898' }}> {text} </span> } visible={record.popVisible} arrowPointAtCenter..原创 2022-04-15 17:07:01 · 2981 阅读 · 0 评论 -
antd多选下拉框一行展示
1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。.@{ant-prefix}-select-multiple .@{ant-prefix}-select-selector { max-height: 32px; overflow: hidden; }这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。2.flex布局将下拉框选项放到一行显示，如果超出了下拉框长度则隐藏。默认的选项是采用float浮动显原创 2022-04-14 16:19:27 · 1506 阅读 · 0 评论 -
ant.design组件Table嵌套子表格（动态数据）
import React, { Component } from 'react'import { Table } from 'antd';const dataSource = [{ busi_name: "指标用户1103 ", prov_name: "西藏", task_id: 7911, item: [{ busi_name: "指标用户1103 ", log_id: 8955, prov_name: "西藏",原创 2022-03-07 16:19:07 · 3251 阅读 · 0 评论 -
修改ant-design表格hover的颜色和取消hover变色
tr:hover:not(.ant-table-expanded-row)不过这里从来没有见过这种用法，这里记录一下：not() 匹配不符合一组选择器的元素，就是当元素有ant-table-expanded-row样式的时候，不会触发这个hover的样式。例子.tableGroup .@{ant-prefix}-table-tbody > tr.cuhk-nur-event-table-row:hover:not(.showBlueGroup) > td {background: #f.原创 2022-03-07 16:17:47 · 5291 阅读 · 1 评论 -
TimePicker开始时间不能大于结束时间
return ( <div> <div> <TimePicker format={'HH:mm'} placeholder='' className="am-ml-10" value={text[0] ? m...原创 2021-12-24 16:38:46 · 1074 阅读 · 0 评论 -
React子组件修改父组件数据
React子组件修改父组件数据子组件class LookDetail extends Component { constructor(props,context) { super(props,context) this.state = {}; } back=()=>{// 子组件的点击事件 this.props.changeData() // 这个changeData()就是激活父组件的方法，可以传值 } render() { const {原创 2021-11-18 14:15:23 · 3282 阅读 · 0 评论 -
react antd Table动态合并单元格
原始数组const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '1', name: 'John Brown', age: 42, address: 'London No. 1 Lake Park', tags:原创 2021-11-09 14:49:55 · 2358 阅读 · 0 评论 -
Antd Table使用时候数据渲染多出几行的问题
添加行索引rowKey，rowKey后面写string是给一个赋值，但是table却是给多个加上key不过可以使用函数：1、给函数附上_id当key；2、给函数附上当前行的index当key；1rowKey={(record,index)=>record._id}2rowKey={(record,index)=>index}...原创 2021-11-09 11:25:57 · 1176 阅读 · 0 评论 -
如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置
原创 2021-10-20 10:14:03 · 2721 阅读 · 0 评论 -
hook中使用ref使用
对于antd的fom表单hook使用refimport React, { useState, useEffect, useRef } from ‘react’; constdateRef = useRef();dateRef.current.setFieldsValue({targetCompletionDate: moment(recordTime)});父组件： 引入 useRef 声明ref的名字原创 2021-09-13 18:11:04 · 1631 阅读 · 0 评论 -
IE9浏览器下的 placeholder不显示的解决方案
查了很多资料，关于ie浏览器的兼容问题最后采取了label的替代方案/* input placeholder 实现的替代方案 */.circle-panel .input-label-placeholder{ position: absolute; left: 50px; top: 38px; z-index: 1; font-size: 24px; color: #cccccc;}.modal-body-rgt .label-placeholder { positi原创 2020-09-11 14:56:41 · 498 阅读 · 0 评论 -
日期时间星期实现多语言转化
const WEEKDAYSABBR=[ { "en": "Sun", "zh": "星期日", }, { "en": "Mon", "zh": "星期一", }, { "en": "Tue", "zh": "星期二", }, { "en": "Wed", "zh": "星期三", }, { "en": "Thu", "zh": "星期四", }, { "en": "Fri"原创 2020-08-18 15:27:35 · 534 阅读 · 0 评论 -
antd的版本影响
需求：接到一个项目组件实现多语言需求（根据浏览器自动切换语言）如下图想让日期组件里面的内容变成当前浏览器语言的。发现antd是支持多语言国际化的就在准备加入这个antd 提供了 ConfigProvider 国际化语言的时候，项目本身原来用到了react-i18next，本来以为这个react-i18next不支持组件内的语言变化，但是通过多次复现发现项目目前本身是支持英文与中文切换的。奇了怪了，然后发现是版本问题，原来项目版本是最低的，此时的antd还没开发支持其他语言的版本。...原创 2020-08-18 15:23:10 · 1667 阅读 · 0 评论 -
前端拦截登录不成功问题
好久没写博客了，今天吐槽一下前端拦截问题。。。问题复现：账号密码登录又跳到登录页面首先前后端代码都没改动，前几天还可以正常登录，电脑重启了之后就登录不上去了。然后后端也是正常返回数据的，就是前端自动跳转登录问题，当时只是怀疑是前端拦截问题。后端也确实看到了信息。我就纳闷了。然后开始打断点一句一句的看返回内容。果然在前端拦截配置代码哪里走不下去了。然后感觉是后端响应拦截的时候给我返回了100或者1007，其实女生的感觉还真准哈哈哈哈，打印看了一下果然给我返回了1007拦截跳到了登录页面。之后换了火狐浏原创 2020-08-18 15:08:41 · 1113 阅读 · 0 评论 -
react router中设置默认路由
1.引入所需插件import {HashRouter as Router,Route,Redirect,Link,NavLink} from ‘react-router-dom’2.设置默认路由方法一 <Route path="/" component={MyTable} exact></Route> <Route path="/myTable" component={MyTable}></Route>方法二<Redirect pat原创 2020-06-19 16:50:40 · 3026 阅读 · 0 评论 -
react运行时报错
react 时报错：Import in body of module; reorder to top import/first分析原因：import语句应该放在最前面，至少要放到const定义变量的前面。原创 2020-06-19 15:50:36 · 453 阅读 · 0 评论 -
支持多语言基于react-i18next开发
一、搭建 React 项目npm create-react-app demo二、安装 react-i18nextnpm install i18next react-i18next --save三、语言代码表四、参考五、JS实现通过判断浏览器语言而自动切换语言var lang;!function () { lang = navigator.language || navigator.userLanguage;//常规浏览器语言和IE浏览器 lang = lang.subst原创 2020-06-09 15:24:45 · 806 阅读 · 0 评论 -
react-router-dom的使用
1.下载 npm install --save react-router-domrouter-router 只提供了一些核心的APIreact-router-dom 更多的一些api路由根据url的不同来切换对应组件 实现spa（单页面应用） 在页面切换的时候不会刷新更加接近原生体验2.路由模式hash HashRouter(hash模式，带#号，刷新的时候页面不丢失)browser BrowserRouter（历史记录模式，不带#号，通过历史记录api来进行路由切换的，刷新会丢失，本地模原创 2020-06-05 14:34:13 · 491 阅读 · 0 评论 -
React配置代理实现跨域
配置正向代理 proxy:{ "/api":{ target:"http://www.weather.com.cn/data/cityinfo", changeOrigin:true, "pathRewrite":{ "^/api":"/" } } },原创 2020-06-04 16:18:22 · 414 阅读 · 0 评论 -
React之第一次记录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/react/umd/r原创 2020-05-29 10:52:00 · 159 阅读 · 0 评论 -
创建React项目
1.npm install create-react-app -g2.create-react-app react-demo (react-demo项目名)3.cd react-demo4.npm install5.npm start6.npm install --save react-router-dom 路由配置更多学习原创 2020-05-27 11:28:36 · 131 阅读 · 0 评论