javascript - Acceso a event.target dentro de la devolución de llamada en react

reactjs

Question

Tengo el siguiente fragmento de clase:

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} />

No puedo obtener el tiempo de espera establecido para imprimir el valor del evento, ¿hay algo que debería hacer pero no lo hago?

Answer 1

¿Vas a hacer el timeout como estado?

Mi sugerencia sería así

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

}

Answer 2

Es difícil de decir sin ver su método onKeypress, pero podría ser un problema vinculante. Intente vincular su búsqueda en el constructor.

constructor (props) {
    super(props);

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

Answer 3

Prueba esto:

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

}

A juzgar por su código, creo que está utilizando babel-plugin-transform-class-properties . En ese caso, no necesita una parte de constructor.

Answer 4

SyntheticEvent .

Según DOC :

El SyntheticEvent se agrupa. Esto significa que el objeto SyntheticEvent se reutilizará y todas las propiedades se anularán después de que se haya invocado la devolución de llamada del evento. Esto es por razones de rendimiento.

Ejemplo:

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

¿Cómo acceder a los valores dentro de la devolución de llamada?

Almacenamiento de valor en una variable:

Si desea acceder al valor en la función de devolución de llamada de tiempo de espera, almacene el valor en una variable y use esa variable en lugar de usar directamente el objeto de evento.

function onClick(event) {

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

   const { type } = event;

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

Usando event.persist ():

Si desea acceder a las propiedades del evento de forma asincrónica, debe llamar a event.persist () en el evento, que eliminará el evento sintético del grupo y permitirá que el código de usuario conserve las referencias al evento.

function onClick(event) {

   event.persist();

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

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