react 函数式组件 阻止点击冒泡事件

如果给同时给粉色和红色两个盒子绑定点击事件，由于事件冒泡原理，那么点击红色盒子则会直接点到外层粉色盒子所绑定的事件。如何解决事件冒泡？

import React from 'react'import './bubbing.css'export default function Bubbling() {const toA = () => {console.log('A');}const toB = (e) => {//阻止冒泡e.stopPropagation(); //阻止原生事件冒泡e.nativeEvent.stopImmediatePropagation(); //阻止最外层document上的事件冒泡console.log('B');}return (<div className='A' onClick={toA}><div className='B' onClick={(e) => toB(e)}></div></div>)}

css样式

.A {width: 100px;height: 100px;background-color: pink;display: flex;justify-content: center;align-items: center;}.B {width: 20px;height: 20px;background-color: red;}