CODEWITHSUNDEEP
javascriptreactjsdrag-and-drop
Harsh K
Harsh K

Reputation: 79

onDargStart eventlistener outputs null values in react

I am trying to set up drag and drop feature using React. But the "event" outputs "null" values in "onDragStart" listener.

dragStart(event) { 
    // here events outputs null values for different fields
    console.log(event); // NULL VALUES

    event.dataTransfer.setData('text/plain', event.target.id);
  }

render(){
    return(
        <div onDragStart={(event) => this.dragStart(event)} draggable="true" id="dragtarget" className="sticker">
          // some JSX
        </div>

      )
  }

Any help??

Upvotes: 0

Views: 354

Answers (1)

Kyle Richardson
Kyle Richardson

Reputation: 5645

event is a nullified object in React. You can find more about events in React in their SyntheticEvent documentation.

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:

In their code example they note that event is nullified.

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Won't work. this.state.clickEvent will only contain null values.
  this.setState({clickEvent: event});

  // You can still export event properties.
  this.setState({eventType: event.type});
}

Upvotes: 2

Related Questions