单击按钮上的图标会触发 React 中的 onClicks（按钮和图标）

Question

我有一个Button组件 ( bootstrap-react )，在按钮的一端有一个X图标。 Button和X组件都定义了一个onClick处理程序。

但是，当用户点击X图标时，两个组件的onClick函数都会被触发。 我们如何保证点击图标时只触发X图标的onClick呢？

import { Button } from 'react-bootstrap';
import { X } from 'react-bootstrap-icons';

function MyButton({onClick}) {
    const handleRemoveClick = () => {
        console.log('Clicked on icon')
    }

    return (
        <Button variant="light" onClick={onClick}>
            <span className="btn-text">Hello</span>
            <X fill="#aaa" onClick={handleRemoveClick} />
        </Button>
    )
}

Answer 1

单击X按钮时，您可以对事件 object 调用stopPropagation ，以便事件停止传播。

const handleRemoveClick = (e) => {
    e.stopPropagation();

    console.log('Clicked on icon')
}