• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

263
Views
react-beautiful-dnd no funciona correctamente con el componente Table virtualizado de reacción

Comportamiento esperado

La fila debe arrastrarse a su índice de destino cuando se arrastra de arriba a abajo y viceversa con la animación DnD.

Comportamiento real

La fila no obtiene DnD cuando se arrastra desde el índice inferior al superior. El arrastre de arriba a abajo funciona, pero el elemento se agrega después del índice de la última página y no al índice de destino. La animación DnD parece no funcionar tan bien.

pasos para reproducir

Puede consultar este espacio aislado para replicar el problema.

Caso 1: Arrastre de arriba a abajo

  1. Intente arrastrar y la fila de arriba a abajo índice
  2. verá que la fila se arrastra al último índice de la página, no al índice de destino

Caso 2. Arrastrar de abajo hacia arriba

  1. Intente arrastrar y la fila de abajo hacia arriba índice
  2. observará que las filas no se arrastran y no se llama a onDragEnd.

El mismo código funciona con el componente List de react-virtualized pero no con el componente Table.

¿Qué versión de React estás usando?

16.13.0

¿Qué versión de react-beautiful-dnd está ejecutando?

13.0.0

¿Qué versión de react-virtualized está ejecutando?

9.22.3

¿Qué navegador estás usando?

Cromo

Manifestación

He creado este sandbox para replicar el problema. Puede ejecutar esto para verificar el problema.

https://codesandbox.io/s/vertical-list-forked-3lp71?file=/index.js

¿Alguien puede echar un vistazo a la caja de arena y ayudarme? ¡Avísame si necesitas otra información!


Editar

Así que hoy, depuré esto más y progresé un poco. Parece que el problema fue con la implementación de rowRenderer. Había un div contenedor adicional encima del dom de defaultRowRenderer. Pude resolver el problema parcialmente. Aquí está el nuevo enlace de sandbox con el código actualizado.

Ahora, queda un problema: el desplazamiento no funciona al arrastrar la fila. ¿Alguna sugerencia de cómo puedo solucionar esto?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Finalmente, resolvió el problema (no estoy seguro si esta es la forma correcta). La solución fue pasar ref como div de contenedor de desplazamiento virtualizado de reacción en lugar de div de contenedor principal virtualizado de reacción.

Había actualizado el sandbox anterior con la corrección.

Antes

 ref={(ref) => { if (ref) { // eslint-disable-next-line react/no-find-dom-node const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref); if (whatHasMyLifeComeTo instanceof HTMLElement) { provided.innerRef(whatHasMyLifeComeTo); } } }}

Después (arreglar)

 ref={(ref) => { if (ref) { const whatHasMyLifeComeTo = document.getElementsByClassName( "ReactVirtualized__Grid ReactVirtualized__Table__Grid" )[0]; if (whatHasMyLifeComeTo instanceof HTMLElement) { provided.innerRef(whatHasMyLifeComeTo); } } }}
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error