He visto algo raro cuando trabajo con onChange en React.
El flujo básico es escuchar los cambios de this.props.tableBody y activar el desplazamiento automático al final de la tabla. El tableBody es una lista de elementos.
Uso el componente de clase de reacción y ya he vinculado la función.
class ProgressTable extends Component { constructor(props) { super(props); this.onTableChangeHandler = this.onTableChangeHandler.bind(this); } onTableChangeHandler() { console.log("hi from onTableChangeHandler"); } render() { return ( <div className="table-body-container" onChange={this.onTableChangeHandler}> // not work {this.props.tableBody} </div> ); } }Como de costumbre, el código debería estar bien.
Pero algo extraño sucedió aquí. El onChange , que debería invocar la función onTableChangeHandler ahora no lo hace.
Traté de averiguar qué está sucediendo aquí y descubrí que si agrego () a la función adjunta onChange de esta manera, el código funciona y escucha los cambios correctamente, excepto la primera llamada redundante cuando el componente se render .
<div className="table-body-container" onChange={this.onTableChangeHandler()}> // work like usual {this.props.tableBody} </div>Además, he probado esto y también funciona.
<div className="table-body-container" onChange={console.log("hi")}> // "hi" {this.props.tableBody} </div>¿Puedes mostrarme qué y por qué sucedió esto?
El controlador de eventos onChange se usa para elementos como input o select . Cuando escribe un elemento de entrada, invoca onChange pero los div no "cambian" como tales, por lo que no sucederá nada.
Si está buscando que suceda algo cuando se hace clic en el div, debe usar el controlador onClick en su lugar.
Lo que está haciendo aquí ( onChange={this.onTableChangeHandler()} ) es esencialmente llamar manualmente a su función inmediatamente cuando el componente se procesa (y en cada procesamiento posterior) y es por eso que parece que funciona incluso cuando lo usa en un controlador eso realmente no debería funcionar cuando se usa en divs, pero en realidad esto es solo una mala práctica.