React拖拽組件react-sortable-hoc給子組件添加onClick失效問題

實現使用 react-sortable-hoc 插件

基本使用先見官網： https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=0ronzp

github地址：https://github.com/clauderic/react-sortable-hoc/blob/master/examples/basic.js

 點擊事件綁定不上的解決方案：https://github.com/clauderic/react-sortable-hoc/issues/206

原因：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": ""
                        },
                    ]
                }
            ]
        }
    ],
  };

  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

  render() {

    return (
        <SortableContainer
            //使子項點擊事件可以正常執行的關鍵代碼
            distance = {10}
            onSortEnd={this.onSortEnd}>
            {
                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 />, document.getElementById('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);
  }
}

結束結束。