这是一个基本组件。<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
解决这个问题的另一种方法是在子进程上设置onMouseEnter和onMouseLeave事件。(你的< li >标签)
当鼠标悬停在子进程上时,您可以设置一个特定的状态来停止父进程以执行onClick函数内容。
喜欢的东西:
class List extends React.Component {
constructor(props) {
super(props)
this.state.overLi = false
}
handleClick() {
// do something
}
render() {
return (
<ul
onClick={(e) => {
if (!this.state.overLi) {
console.log("parent")
this.handleClick()
}
}}
>
<li
onClick={(e) => {
console.log("child")
// prevent default? prevent propagation?
this.handleClick()
}}
onMouseEnter={() =>
this.setState({
overLi: true,
})
}
onMouseLeave={() =>
this.setState({
overLi: false,
})}
></li>
</ul>
)
}
}
我已经搜索了很多,没有设法实现任何解决方案为我的上下文使用e.s stoppropagation ()
解决这个问题的另一种方法是在子进程上设置onMouseEnter和onMouseLeave事件。(你的< li >标签)
当鼠标悬停在子进程上时,您可以设置一个特定的状态来停止父进程以执行onClick函数内容。
喜欢的东西:
class List extends React.Component {
constructor(props) {
super(props)
this.state.overLi = false
}
handleClick() {
// do something
}
render() {
return (
<ul
onClick={(e) => {
if (!this.state.overLi) {
console.log("parent")
this.handleClick()
}
}}
>
<li
onClick={(e) => {
console.log("child")
// prevent default? prevent propagation?
this.handleClick()
}}
onMouseEnter={() =>
this.setState({
overLi: true,
})
}
onMouseLeave={() =>
this.setState({
overLi: false,
})}
></li>
</ul>
)
}
}
我已经搜索了很多,没有设法实现任何解决方案为我的上下文使用e.s stoppropagation ()