Soy nuevo en reaccionar, por lo que solo estaba introduciendo funcionalidades de arrastrar y soltar en los componentes de reacción.

Aquí estoy arrastrando componentes desde leftPanelComponent y soltándolos en RightPanelComponent , lo que significa que ambos son componentes diferentes en reacción. por lo tanto, no obtengo el valor del evento en RightPanelComponent en la función Drop

En LeftPanelComponent,

 <div draggable='true' className='name' onDragStart={dragStartHandler.bind(this)}> {propertyName(name, 10, 4)} </div> const dragStartHandler = (ev) => { console.log('react SyntheticEvent ==> ', ev); console.log('nativeEvent ==> ', ev.nativeEvent); ev.dataTransfer.setData('Text', ev); console.log(ev);

Aquí no obtengo el valor del elemento dentro de ev (como ev.currentTraget)

También en mi RightPanelComponent solo estoy escribiendo la función de soltar como

 <div className='wrapper-div' onDrop={(e) => this.drop(e)} onDragOver={(e) => this.allowDrop(e)}> //some code </div>

Aquí tampoco estoy recibiendo el valor de caída. De alguna manera necesito obtener el valor arrastrado

 drop = (ev) => { if (ev != undefined) { var data = ev.dataTransfer.getData('Text'); --> not getting value ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } }; allowDrop = (ev) => { if (ev != undefined) { ev.preventDefault(); } };

¿Es esta la forma correcta de hacer lo mismo en reaccionar, ya que puedo ver en la interfaz de usuario, el elemento se arrastra con el signo + cuando ingresa en el área de colocación?

Pero no obtengo el valor del evento en la función Drop en RightPanelComponent. (Se está volviendo indefinido) ¿Me estoy perdiendo algo? Corríjame si me equivoco.