Should I be economical with JS-events at table cell level?-CodePudding

If I have a table in which I want to react to table-cell events, is it better to put the event on the table-element and handle cell specific events with the help of i.e. closest("td"), or is it ok to put the event on the table cell? (I'm talking about tables with a large number of cells, all of which are visible.)

// pseudo react-code
return (
  <table onClick={handleCellClick}>
    <tr>
      <td>...</td><td>...</td><td>...</td><td>...</td>
    </tr>
    //...
  </table>
)

// pseudo react-code
return (
  <table>
    <tr>
      <td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td>
    </tr>
    //...
  </table>
)

CodePudding user response：

Since you're asking about React specifically: No, you don't need to put only a single event handler at the table, React already does event delegation for you. So using <td onClick={…}> is probably a lot simpler, especially if you use nested components.

CodePudding user response：

Without really knowing what your click handler is meant to be doing, here's an an example using event delegation, and data attributes, to show how you can identify individual cells.

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>