在 React 中单击按钮上的图标会同时触发 onClick（按钮和图标）

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 按钮时，您可以在事件对象上调用stopPropagation，以便事件停止传播。

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

    console.log('Clicked on icon')
}