Tengo muchos botones, cada uno con su función onClick. ¿OnClick se encarga de manejar eventListener y distribuir el evento en la función correcta automáticamente, o necesito probar que el evento es para mi función?
¿Qué sucede si también agregué eventListeners para el evento de clic? En esos detectores de eventos, verifico que el objetivo del evento sea para la función correcta. ¿Pero React también pasará un clic a las funciones onClick() también? ¿Cómo diferencia React entre los controladores onClick() y los controladores addEventListener("click")?
Por ejemplo, en mi componente de clase tengo:
export class MyPage extends React.Component { constructor(props) { super(props); ... } componentDidMount() { this.attachEventHandlers(); ... } attachEventHandlers() { window.addEventListener("click",this.ontoggleExpandUpper.bind(this)); window.addEventListener("click",this.ontoggleExpandLower.bind(this)); ... } ontoggleExpandUpper(){ if (!(event.target.classList.contains('uexp'))) return; ... } ontoggleExpandLower(){ if (!(event.target.classList.contains('lexp'))) return; ... } toggleSidebar() { this.setStateOnMount((state) => ({ ...state, sidebarOpen: !state.sidebarOpen })); } render() { //first a couple with onClick() <button className="open-sidebar btn btn-dark btn-lg shadow" onClick {() => this.toggleSidebar()}> <i className="open-sidebar"></i> </button> <button className="toggle-sidebar-closed btn btn-dark" onClick={() => this.toggleSidebar()}> <i className="fi flaticon-cancel"></i> </button> //next a couple with addEventListener() <button id="uexp" className="uexp"> <i id="iuexp" className="uexp"></i> </button> <button id="lexp" className="lexp"> <i id="ilexp" className="lexp"></i> </button> } }En su ejemplo, está agregando un detector de eventos a un objeto de window , lo que significa que se activará con cada clic, sin importar en qué elemento DOM haga clic. Por lo general, desea agregar el oyente solo a un elemento que realmente le interese, por ejemplo, document.querySelector('.uexp').addEventListener('click', event => this.onToggleExpandUpper(event)) . De esta manera, no tiene que verificar si el objetivo del evento es correcto, porque onToggleExpandUpper() se llamará solo cuando haga clic en el elemento correcto.
React se encargará de registrar los oyentes de eventos por usted. Cuando configura onClick , se agregará automáticamente a un elemento correcto. Debería preferir el atributo onClick en lugar de agregar detectores de eventos manualmente, porque es más declarativo.