triables-réagissent Liste hoc disparaît lorsque je fais glisser un élément

Question

jsFiddle: https://jsfiddle.net/40vpaLj5/

Je googlé quelques problèmes et les questions que je trouve en voie de disparition liées étaient quand les gens ont utilisé un modal et ils ont parlé de la mise en Z- index pour le réparer. Je l'ai essayé quand même rien. Comment puis-je réparer cela?

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> 
); 
}); 

Answer 1

Chaque sortableElement devrait avoir son propre index prop:

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

Voici la mise à jour à votre jsFiddle:
https://jsfiddle.net/40vpaLj5/1/