<Content className={style.content} style={{ maxHeight: 'calc(100vh - 175px)',overflowY:"auto" }} id ='handelDocID'> <BackTop visibilityHeight={300} target ={()=>document.getElementById('handelDocID')} > <div className={style.ba…

有这么一个需求,利用antd组件库中的BackTop组件的逻辑,但是自己写样式. 我的目标样式是:有两张图片,一张是normal(正常情况),一张是hover(悬停情况). 这时候就要用到css的动画了 这是第一版,也是错误的版本 下面是jsx的代码 <BackTop> <div className="normal-top"></div> </BackTop> 这是css的样式代码 .mybacktop .normal-top { hei…

使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, /*翻页查询*/ pageSize:10, /*分页查询*/ activePage: 1, /*默认显示一页*/ selectedRowKeys: [], // 这里配置默认勾选列 loading: false, /*antd*/ selectedRow:[] } 在制作过程中,根据需要把antd的…

公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getFieldDecorator API时会后错,直接使用getFieldProps代替,即可 this.props.form 中含有大量的方法,可以去这里调用 刚开始使用大部分的报错是因为antd中的方法都没有 bind(this) 绑定this,只要绑定this即可 使用antd组件不能直接export de…

最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTreeItem: { pageX: "", pageY: "", id: "", categoryName: "" } } // tree列表上右键事件 onRightClick = e => { this.setState({…

1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .ant-tree-node-content-wrapper{ height:auto; } .ant-tree-node-content-wrapper{ white-space: normal; max-width: 100%; } } ` 2.节点都展开的话 会太高了.也会撑开盒子,影响美观. 解…

还是拿代码来讲吧,详情见注释 子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; const FormItem = Form.Item; class Forms extends Component{ getItemsValue = ()=>{ //3.自定义方法,用来传递数据(需要在父组件中调用获取数据) const valus= this.props.form.getFieldsVa…

一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1.若列头与内容不对齐或出现列重复,请指定固定列的宽度 width.如果指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局. 2.建议指定 scroll.x 为大于表格宽度的固定值或百分比.注意,且非固定列宽度之和不要超过 scroll.x. 如果按照…

一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-table为例): { "name": "scroll-antd-table",//包的名称用于别人 npm install xxxx的时候使用 "version": "1.0.0",//包的版本号 "description…

鼠标移出: 鼠标移入: import React, { Component } from 'react' import { Card, Icon, Avatar } from 'antd'; const { Meta } = Card; export default class Test extends Component{ constructor(props){ super(props) this.state={ isenter:false } } MouseEnter() { setTime…