0

I'm writing a React app and I'm struggling with the following problem. I have a table, let's say:

<Table>
  <Row onClick={() => onRowClick(0)} >
    <Cell innerComponent={row.cell[0].Component}/>
    <Cell innerComponent={row.cell[1].Component}/>
    <Cell innerComponent={row.cell[2].Component}/>
    <Cell innerComponent={row.cell[3].Component}/>
  </Row>
  <Row onClick={() => onRowClick(1)} >
    <Cell innerComponent={row.cell[0].Component}/>
    <Cell innerComponent={row.cell[1].Component}/>
    <Cell innerComponent={row.cell[2].Component}/>
    <Cell innerComponent={row.cell[3].Component}/>
  </Row>
</Table>

so it's just a table component with some element inside. I added the onRowClick prop to the table but the issue is raised when the row.cell[_].Component, that is rendered in the Cell, has a button inside. Indeed, in that case the onClick of the button and the onRowClick is invoked that is partially wrong.

I know, I can use e.stopPropagation() on the inner button onClick but this is easily forgettable and not so maintainable in a big team.

Do you have any suggestion how can I invoke the onRowClick only if this is the first onClick handler invoked instead of stop propagation from the inner handler?

alessandro308
  • 1,912
  • 2
  • 15
  • 27

2 Answers2

0

Inside the onClick function you have an event which can identify the clicked element. Considering that you can continue execution or not.

So it can be something like onClick={(event) => { return // if condition ? onRowClick(0) : ''}}

Florin Mateescu
  • 197
  • 2
  • 12
  • This does not work since if you click, let's say, a span inside a cell, the currentTarget is the span but that onClick has not been handled yet by any handler – alessandro308 Nov 17 '22 at 16:16
0

Maybe you could have a function that compares the currentTarget with target of the event.

So if these two are different, then the onRowClick should not be invoked.

"The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred."

You can see more details about currentTarget and target here:

What is the exact difference between currentTarget property and target property in JavaScript

Marios
  • 339
  • 1
  • 14
  • This does not work since if you click, let's say, a span inside a cell, the currentTarget is the span but that onClick has not been handled yet by any handler – alessandro308 Nov 17 '22 at 16:16
  • How does this not work? If you click lets say the span inside a cell, the onClick of the Row will also fire as it bubbles up so then you will compare if the currentTarget(which is Row) equals target (which is span) to decide whether onRowClick will run – Marios Nov 18 '22 at 07:44
  • Exactly. In my scenario, I want to invoke the handler on the row only if the span or some of the span ancestor has not yet invoked any other handler – alessandro308 Nov 18 '22 at 14:20