REECT JS-点击孩子onclick时，请防止父母onclick

Question

这是我单击行 myparentClick 时的JSX

，但是当我单击任何一个 myChildClick mychildclick2

然后它触发父母和孩子。

首先触发父母，然后是

{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.stoppropagation（）上; 在单击孩子onclick时，哪个不起作用

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

如何防止父母onclick？

Answer 1

尝试

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

Answer 2

我拿走了您的代码，并试图复制您的问题。由于某种原因，您的停止propagation对您不起作用，但是当我尝试使用时，它可以正常工作：

https：> https： > https： //stackblitz.com/edit/reeact-ts-mk1dcr