这是一个基本组件。<ul>和<li>都有onClick函数。我只想在<li>上的onClick来触发,而不是<ul>。我怎样才能做到这一点呢?
我已经玩了e.preventDefault(), e.stopPropagation(),没有任何效果。
class List extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
// do something
}
render() {
return (
<ul
onClick={(e) => {
console.log('parent');
this.handleClick();
}}
>
<li
onClick={(e) => {
console.log('child');
// prevent default? prevent propagation?
this.handleClick();
}}
>
</li>
</ul>
)
}
}
// => parent
// => child
这并不是100%理想的,但是如果在儿童->儿童时尚中传递道具太痛苦,或者创建Context. provider /Context。消费者只是为了这个目的),并且你正在处理另一个库,它有自己的处理程序,它在你的库之前运行,你也可以尝试:
function myHandler(e) {
e.persist();
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
}
据我所知,这件事。persist方法可以防止对象立即被扔回React的SyntheticEvent池。因此,在React中传递的事件在你到达它的时候实际上并不存在!这种情况发生在孙辈中,因为React处理内部的事情的方式是首先检查父级的SyntheticEvent处理程序(特别是如果父级有一个回调)。
只要你没有调用持久化,这将创建重要的内存继续创建事件,如onMouseMove(你没有创建某种Cookie Clicker游戏,如奶奶的饼干),这应该是完全没问题的!
另外请注意:通过偶尔阅读他们的GitHub,我们应该密切关注React的未来版本,因为他们可能最终会解决一些痛苦,因为他们似乎正在朝着在编译器/编译器中折叠React代码的方向发展。
这并不是100%理想的,但是如果在儿童->儿童时尚中传递道具太痛苦,或者创建Context. provider /Context。消费者只是为了这个目的),并且你正在处理另一个库,它有自己的处理程序,它在你的库之前运行,你也可以尝试:
function myHandler(e) {
e.persist();
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
}
据我所知,这件事。persist方法可以防止对象立即被扔回React的SyntheticEvent池。因此,在React中传递的事件在你到达它的时候实际上并不存在!这种情况发生在孙辈中,因为React处理内部的事情的方式是首先检查父级的SyntheticEvent处理程序(特别是如果父级有一个回调)。
只要你没有调用持久化,这将创建重要的内存继续创建事件,如onMouseMove(你没有创建某种Cookie Clicker游戏,如奶奶的饼干),这应该是完全没问题的!
另外请注意:通过偶尔阅读他们的GitHub,我们应该密切关注React的未来版本,因为他们可能最终会解决一些痛苦,因为他们似乎正在朝着在编译器/编译器中折叠React代码的方向发展。