React JS -当点击子onClick时阻止父onClick

Question

这是jsx

点击ROWmyParentClick被触发，但是当我点击的任何子节点时，myChildClickmyChildClick2

然后同时触发父节点和子节点。

首先触发父元素，然后触发子元素

{myData?.map((item, index) => {
return(
<Row onClick={() => myParentClick(index)}>
<Col>
// some html tags
</Col>
<Col>
// some html tags
</Col>
<Col>
// React Bootstrap DropDown
<DropDown>
<DropDown.Toggle>
// code
</DropDown.Toggle>
<DropDown.Menu>
<DropDown.Item onClick={() => myChildClick(index)}>
<p>some TEXT</p>
</DropDown.Item>
</DropDown.Menu>
</DropDown>
</Col>
<Col onClick={() => myChildClick2(index)} >
<p>some TEXT</p>
</Col>
<Col onClick={() => myChildClick3(index)} >
<p>some TEXT</p>
</Col>
</Row>
)
})}

我已经尝试过了，点击e.p stoppropagation ();

onClick={
(e) => {
e.stopPropagation();
myChildClick(index)
}
}

如何防止单击子onClick时父onClick ?

Answer 1

Try

onClick={
(e) => {
if (e.defaultPrevented) return
e.preventDefault()

myChildClick(index)
}
}

Answer 2

我拿了你的代码，并试图重现你的问题。由于某些原因，你的stopPropagation不为你工作，但当我尝试它，它工作得很好:

https://stackblitz.com/edit/react-ts-mk1dcr