单击按钮上的图标会触发 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')
}

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

Clicking Icon on Button Triggers Both onClicks (Button & Icon) in React

javascript

twitter-bootstrap

reactjs

react-bootstrap

react-bootstrap-icons