Tengo como 30 o más botones en mi aplicación de reacción. y no quiero agregar event-Listener a todos y cada uno de los botones. pero cada botón tiene un trabajo específico que hacer. Entonces, ¿hay alguna manera de que pueda lograr esto?
algo como esto (está depreciado ahora):
$("button").click(() => { fetch("https://reqres.in/api/users/" + this.value) .then((res) => res.json()) .then((result) => setUser(result)); });Agregué los mismos nombres de clase a los elementos DOM a los que desea agregar los detectores de eventos y esos elementos mediante el método getElementsByClassNames. Luego, les agregó el detector de eventos.
let count = 0; function onClick() { document.getElementById("count").innerText = count++; } const buttons = document.getElementsByClassName("btn-multiple"); [...buttons].forEach(btn => btn.addEventListener("click", onClick)); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple scroll example</title> <style> </style> </head> <body> <section id="clear-section" class="clear-section"> <input type="button" value="V1" class="btn-multiple" /> <input type="button" value="V2" class="btn-multiple" /> <input type="button" value="V3" class="btn-multiple" /> <input type="button" value="V4" class="btn-multiple" /> <input type="button" value="V5" class="btn-multiple" /> <input type="button" value="V6" class="btn-multiple" /> <p id="count"></p> </section> </body> </html>