React拖拽组件react-sortable-hoc给⼦组件添加onClick失效问题实现使⽤ react-sortable-hoc 插件
原因：react-sortable-hoc已经使⽤了onClick事件。因此，其中的任何内容都⽆法使⽤onClick。
演⽰⼀种解决⽅案：您可以给 SortableContainer 组件上使⽤distance prop设置触发排序之前要拖动的最⼩距离（例如，您可以设置10px 的距离，例如：distance = {10}），这时候直接点击就不会⽴即触发SortableContainer 上的点击事件。
从⽽解决问题。
拖拽+点击效果图：
先安装包
npm install react-sortable-hoc --save
主要部分代码演⽰：
import React, {Component} from 'react';
import {render} from 'react-dom';
import {Tooltip} from 'antd';
import IconFont from '../IconFont'; //IconFont
//拖拽
import {sortableContainer, sortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
const SortableContainer = sortableContainer( (props) => <ul {...props}>{props.children}</ul> );
const SortableItem = sortableElement( (props) => <li {...props}>{props.children}</li> );
//拖拽end
class App extends Component {
state = {
Routes: [
{
"title": "企业管理",
"icon": "icont3a",
"isRenderMenu": true,
"children": [
{
"title": "企业通讯录",
"icon": "icona23",
"children": [
{
"path": "/admin/corporateBook",
"exact": false,
"showInMenu": true,
"title": "企业通讯录",
"icon": ""
}
]
}
]
},
{
"title": "智能⼈事",
"icon": "icont1a",
"isRenderMenu": true,
"children": [
{
"title": "组织架构",
"icon": "",
"children": [
{
"path": "/admin/aptitudeHR/Framework",
"exact": false,
"showInMenu": true,
"title": "部门/员⼯",
"icon": ""
},
{
"path": "/admin/aptitudeHR/PostManage",
"exact": false,
"showInMenu": true,
"title": "职位管理",
"icon": ""
},
]
}
]
}
],
react tooptip组件};
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({items}) => ({
items: arrayMove(items, oldIndex, newIndex),
}));
};
render() {
return (
<SortableContainer
//使⼦项点击事件可以正常执⾏的关键代码
distance = {10}
onSortEnd={SortEnd}>
{
this.state.Routes.map((item, index) => (
<SortableItem
key={`item-${index}`}
index={index}
value={index}
>
<ul className='left-menu global-timestamp-1587610943136-left-menu'>
<li
className={this.state.currentLeftMenu === index ? 'active' : ''}
//点击事件可以正常执⾏
onClick={this.handleGo.bind(this, item, index)}>
<Tooltip placement="right" title={item.title} mouseEnterDelay='0'>
<div style={{textAlign: 'center'}}>
<IconFont type={item.icon}/>
</div>
</Tooltip>
</li>
</ul>
</SortableItem>
))
}
</SortableContainer>
);
}
}
render(<App />, ElementById('root'));
这样就可以了。
哦，注意拖拽时可能会造成样式丢失，原因是你的样式可能存在⽗级，因为拖拽时 react-sorttable-hoc 会帮我们复制⼀份拖拽的dom节点，放到body下，所以有⽗级样式就访问不到了。可以把样式直接写在body，注意class命名，别和其他冲突了。
我是这样写的：
//左侧拖拽菜单
ul.global-timestamp-1587610943136-left-menu.left-menu {
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
width:64px;
font-size: 20px;
color: rgba(255,255,255,.5);
li {
display: flex;
flex-direction: column;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
margin-bottom: 28px;
cursor: pointer;
}
li:hover{
color: rgba(255,255,255,.9);
}
li.active {
color: rgba(255,255,255,1);
background:rgba(255,255,255,0.12);  }
}
View Code
结束结束。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。