Para demostrar mi pregunta, compararé javascript vainilla y reaccionaré. En javascript, cuando tengo
<div> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> </div>y quiero agregar alguna funcionalidad a todos los botones, puedo hacer
const buttons = document.querySelectorAll(".btn"); buttons.forEach(btn=>{ btn.addEventListener("click",(e)=>{ //some code here }) })En reaccionar, ¿cómo puedo hacer lo mismo, en lugar de agregar "onClick" a cada botón? Porque imagina si hay 20 botones como este:
<button className="btn" onClick={()=>{ //some code here }}>button</button>Todavía podría usar querySelector como la forma de JavaScript, pero escuché que es una mala práctica en reaccionar. Así que me pregunto si hay alguna otra forma de hacer que el código sea más limpio.
¡React es perfecto para esto, porque te permite reutilizar componentes! Puede crear un componente que contenga su controlador de clics y luego reutilizarlo en toda su aplicación.
const MyReusableButton = () => { const myClickHandler = () => { console.log("Clicked!"); } return <button onClick = {myClickHandler}>Click Me</button>; } const App = () => { // now I can reuse my button component as many times as I want! return ( <div> <MyReusableButton /> <MyReusableButton /> <MyReusableButton /> <MyReusableButton /> </div> ); } ReactDOM.render(<App />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>Haz una lista que describa lo que sea único en tus botones. Asigne la lista a sus botones.
const nums = [0,1,2,3,4,5] return <div> {nums.map(num => <button onClick={() => console.info("clicked" + num)}> This is button {num} </button> )} </div>En lugar de adjuntar un oyente a cada botón, puede usar la delegación de eventos para adjuntar un oyente a un contenedor para observar eventos a medida que "burbujean" el DOM de cada elemento/componente secundario.
function Example() { function handleClick(e) { const { nodeName, textContent } = e.target; if (nodeName === 'BUTTON') { console.log(textContent); } } return ( <div onClick={handleClick}> <button>Click me 1</button> <button>Click me 2</button> <button>Click me 3</button> <button>Click me 4</button> </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>