事件冒泡
e.stopPropagation
function Button({ onClick, children }) {return (<button onClick={e => {e.stopPropagation();onClick();}}>{children}</button>);
}export default function Toolbar() {return (<div className="Toolbar" onClick={(e) => {alert('你点击了 toolbar ！');}}><Button onClick={() => alert('正在播放！')}>播放电影</Button><Button onClick={() => alert('正在上传！')}>上传图片</Button></div>);
}
- 点击播放电影，会调用播放电影的事件+弹出点击了boolbar这两个，这里在子组件中添加了阻止事件冒泡，他就不会再去执行父组件的“”点击了boolbar“” 这个函数
阻止默认行为
export default function Signup() {return (<form onSubmit={e => {e.preventDefault();alert('提交表单！');}}><input /><button>发送</button></form>);
}
- 不要混淆 e.stopPropagation() 和 e.preventDefault()。它们都很有用，但二者并不相关+
- e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。
- e.preventDefault() 阻止少数事件的默认浏览器行为。
