Accessing event.target inside callback in react

Question

I have the following class snippet:

constructor(props) {
    super(props);

    this.timeout = null;
}

search = (e) => {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(
        function(){ console.log(e.target); },
        500
    );
}

<input 
    type="text" 
    placeholder="Search by title or author" 
    onKeyPress={this.search} />

I can't get the set timeout to print the value from the event, is there something that i should be doing but i'm not?

Answer 1

SyntheticEvent.

As per DOC:

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons.

Example:

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

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

How to access the values inside callback?

Storing value in a variable:

If you want to access the value in timeout callback function then store the value in a variable and use that variable instead of directly using the event object.

function onClick(event) {

   console.log(event.type); // => "click"

   const { type } = event;

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

Using event.persist():

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

function onClick(event) {

   event.persist();

   console.log(event.type); // => "click"

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

Answer 2

Try this:

search = (e) => {
e.persist();
clearTimeout(this.timeout);
this.timeout = setTimeout(
    function(){ console.log(e); alert(e) },
    500
);

}

Judging from your code I think that you are using babel-plugin-transform-class-properties. In that case you don't need a constructor part.

Answer 3

SyntheticEvent - React

Note: As of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled.

After React v17, SyntheticEvent has no longer nullified the event.