Si tengo una tabla en la que quiero reaccionar a los eventos de la celda de la tabla, ¿es mejor colocar el evento en el elemento de la tabla y manejar los eventos específicos de la celda con la ayuda de, por ejemplo closest("td") , o está bien? poner el evento en la celda de la tabla? (Estoy hablando de tablas con una gran cantidad de celdas, todas visibles).
// pseudo react-code return ( <table onClick={handleCellClick}> <tr> <td>...</td><td>...</td><td>...</td><td>...</td> </tr> //... </table> )o
// pseudo react-code return ( <table> <tr> <td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td> </tr> //... </table> )Ya que está preguntando específicamente sobre React: No, no necesita poner solo un controlador de eventos en la mesa, React ya hace la delegación de eventos por usted . Entonces, usar <td onClick={…}> es probablemente mucho más simple, especialmente si usa componentes anidados.
Sin saber realmente qué debe hacer su controlador de clics, aquí hay un ejemplo que usa la delegación de eventos y los atributos de datos para mostrar cómo puede identificar celdas individuales.
const { useState } = React; function Example() { function handleClick(e) { if (e.target.matches('td')) { const { dataset: { id } } = e.target; console.log(id); } } return ( <table onClick={handleClick}> <tr> <td data-id="1-1">1-1</td> <td data-id="1-2">1-2</td> <td data-id="1-3">1-3</td> <td data-id="1-4">1-4</td> </tr> <tr> <td data-id="2-1">2-1</td> <td data-id="2-2">2-2</td> <td data-id="2-3">2-3</td> <td data-id="2-4">2-4</td> </tr> </table> ); } ReactDOM.render( <Example />, document.getElementById('react') ); table { border-collapse: collapse; bordeR: 1px solid #565656; } td { padding: 0.44em; border: 1px solid #dfdfdf; } td:hover { cursor: pointer; background-color: #ffff00; } <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>La conclusión es que, en JavaScript estándar, la delegación de eventos es la solución preferida para evitar problemas de memoria y rendimiento. Si está utilizando una biblioteca de interfaz de JavaScript como React.js o un marco como Ember, Angular, ... debe leer los documentos y verificar cómo se administran los eventos. En el caso de React.js, no es necesario implementar la delegación de eventos personalizados, porque React.js hace esta optimización por usted.