当我拖动一个元素时，react-sortable-hoc 列表消失了答案

【问题标题】：react-sortable-hoc List disappears when I drag an element当我拖动一个元素时，react-sortable-hoc 列表消失了
【发布时间】：2017-08-23 23:57:29
【问题描述】：

JSFiddle：https://jsfiddle.net/40vpaLj5/

我搜索了一些问题，发现唯一消失的相关问题是人们在模态框上使用它时，他们谈到设置 z-index 来修复它。反正我试了还是一无所获。我该如何解决这个问题？

import React from 'react';
import PlaylistPages from './PlaylistPages';

class PlaylistSortableComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      test: [
        '1','2', '3', '4'
      ]
    }
  }

  render() {
    return (
      <PlaylistPages pages={this.state.test} style={{zIndex: 999999}} />
    );
  }
}   


const PlaylistPages = SortableContainer(({pages}) => {
  return (
    <div>
      {
        pages.map((page, index) =>
          <PlaylistPage key={index} page={page} style={{zIndex: 99999999}} />
      )}
    </div>
  );
});   

const PlaylistPage = SortableElement(({page}) => {
  return (
    <div style={{zIndex: 99999999}} >{page}</div>
  );
});

【问题讨论】：

标签： javascript reactjs drag-and-drop higher-order-components react-sortable-hoc

【解决方案1】：

每个sortableElement 都应该有自己的index 道具：

<PlaylistPage key={index} index={index} page={page} style={{zIndex: 99999999}} />

这里是您的 jsfiddle 的更新：
https://jsfiddle.net/40vpaLj5/1/

【讨论】：

我非常爱你。已经敲了几个小时的头
我错过的这个简单的事情也让我发疯了。谢谢?！

【解决方案2】：

我遇到了同样的问题，Dekel 是对的。就我而言，z-index 修复了错误：

<SortableList
    axis="y"
    helperClass="sortable-list-tab"
    lockAxis="y"
    distance={0}
    onSortEnd={onSortEnd}
>
    <ul>
       {toolItems.map((value, index) => (
          <SortableItem key={`item-${index}`} index={index}>
              <li className="sortable-list-tab" >
                 <Button type="dashed">{`${value.label} (${index + 1})`}</Button>
              </li>
          </SortableItem>
        ))}
    </ul>
</SortableList>

而 sortable-list-tab 类看起来像：

.sortable-list-tab {
    cursor: default;
    visibility: visible;
    z-index: 99999999;
    list-style-type: none;
    padding: .3em;
  }

【讨论】：