React JS - 单击子 onClick 时阻止父 onClick

Question

这是jsx

当我点击ROW myParentClick被触发但是当我点击任何孩子是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={
    (e) => {
        e.stopPropagation();
        myChildClick(index)
    }
}

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

Answer 1

尝试

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

Answer 2

我拿了你的代码并试图重现你的问题。 出于某种原因，你的 stopPropagation 对你不起作用，但当我尝试它时，它工作正常：

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