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


        

Answer 1

It's hard to say without seeing your onKeypress method, but it might be a binding issue. Try binding your search in the constructor.

constructor (props) {
    super(props);

    this.timeout = null;
    this.search = this.search.bind(this);
}

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.

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 4

Are you going to make the timeout as state?

My suggestion would be like this

constructor(props) {
    super(props);
    this.state = {
       timeout: null
    }
}

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

}