javascript - eventos - ReactJS no puede establecer el estado de un evento con event.persist()

react js onclick event

Question

Necesito establecer un campo de estado que obtengo de un evento, pero no se establece cuando le paso una función. El componente y método se parece a lo siguiente:

constructor(props: SomeProps, context: any) {
  super(props, context);
  this.state = {
    isFiltering: props.isFiltering,
    anchor: "",
  };
}

private toggleFilter = (event: any) => {
  event.persist()
  this.setState(prevState => ({
    isFiltering: !prevState.isFiltering,
    anchor: event.currentTarget // does not work, it''s null
  }));
}

Si event.persist() , obtengo el siguiente error:

Este evento sintético es reutilizado por razones de rendimiento. Si está viendo esto, está accediendo al método currentTarget en un evento sintético liberado / anulado. Esta es una función no operativa. Si debe conservar el evento sintético original, use event.persist (). Consulte https://facebook.github.io/react/docs/events.html#event-pooling para obtener más información.

Por alguna razón el siguiente código funciona:

private toggleFilter = (event: any) => {
  this.setState({anchor:event.currentTarget}) // works fine
  this.setState(prevState => ({
    isFiltering: !prevState.isFiltering,
  }));
}

¿Por qué funciona lo anterior pero no cuando uso this.setState(prevState=> ...) ?

Answer 1

Con el comentario de @thirtydot obtuve una solución funcional.

Creo que es porque setState es "asíncrono", por lo que cuando se ejecuta la función que pasa a setState (y se accede al evento), el evento ya no existe. En la segunda versión, se accede al evento de inmediato y se pasa su objetivo actual a setState

Así que event.currentTarget el event.currentTarget en una variable y lo usé como se explica en la https://facebook.github.io/react/docs/events.html#event-pooling

Se ve así y funciona.

private toggleFilter = (event: any) => {
        let target = event.currentTarget;   
        this.setState((prevState) => ({
            isFiltering: !prevState.isFiltering,
            anchor: target
        }));
    }

Sin embargo, esto no explica por qué event.persist() no funciona. Aceptaré la respuesta que lo explica.

Answer 2

Me encontré con un mensaje de advertencia similar al rellenar los componentes dinámicamente y para resolver esto, solo tenía que envolver la función con la función de flecha.

Desde:

{ text: "Delete item", onClick: deleteItem },

A:

{ text: "Delete item", onClick: (id) => deleteItem(id) },

Answer 3

Para resolver este problema, antes de llamar a handleSubmit of form, llame a event.persist () y luego en la definición de handleSubmit () - escriba su lógica. Por ejemplo

<form id="add_exp_form" onSubmit={(event) => {event.persist();this.handleSubmit(event)}}>

handleSubmit(event){
    // use event.currentTarget - It will be visible here
}

Answer 4

Ese es el comportamiento esperado , porque event.persist() no implica que currentTarget no esté siendo anulado, de hecho debería serlo, es compatible con la implementación nativa del navegador.

Esto significa que si desea acceder a currentTarget de forma asíncrona, debe almacenarlo en una variable como lo hizo en su respuesta.

Para citar a uno de los desarrolladores principales de React: Sophie Alpert .

currentTarget cambia a medida que aumenta el evento: si tuviera un controlador de eventos en el elemento que recibe el evento y otros en sus ancestros, verían valores diferentes para currentTarget. IIRC anularlo es consistente con lo que sucede en los eventos nativos; Si no, hágamelo saber y reconsideraremos nuestro comportamiento aquí.

Consulte la fuente de la discusión en el repositorio oficial de React y en el siguiente fragmento de código proporcionado por Sophie que he tocado un poco.

var savedEvent;
var savedTarget;

divb.addEventListener(''click'', function(e) {
  savedEvent = e;
  savedTarget = e.currentTarget;
  setTimeout(function() {
    console.log(''b: currentTarget is now '' + e.currentTarget);
  }, 0);
}, false);

diva.addEventListener(''click'', function(e) {
  console.log(''same event object? '' + (e === savedEvent));
  console.log(''same target? '' + (savedTarget === e.currentTarget));
  setTimeout(function() {
    console.log(''a: currentTarget is now '' + e.currentTarget);
  }, 0);
}, false);

div {
  padding: 50px;
  background: rgba(0,0,0,0.5);
  color: white;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div id="diva"><div id="divb"> Click me and see output! </div></div>
  
</body>
</html>