Question

我有一个<div>与其孩子<p>的大小相匹配

我正在向div发送一个onClick处理程序，但由于<p>阻止了它，因此无法单击它。

我可以将onClick处理程序发送到另一个级别，但似乎有一种方法可以处理此问题。

class ExampleParent extends React.Component{
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event) {
    console.log(event.target);
  }
  render() {
    <ExampleChild onClick={this.handleClick} />
  }
}

const ExampleChild = (props) => {
  return (
    <div onClick={(event) => props.handleClick(event)}>
      <ExampleGrandchild />
    </div>
  )
}

const ExampleGrandchild = () => {
  return (
    <p>hi</p>
  )
}

Answer 1

有几种解决方案

添加一些CSS，以防止鼠标事件被“ p”处理

p {
  pointer-events: none;
}

在您的ExampleGrandChild中添加一个“ onClick”道具，然后在“ p”上捕获onClick事件并将其冒泡给父对象

const ExampleChild = (props) => {
  return (
    <div onClick={props.handleClick}>
      <ExampleGrandchild handleClick={props.handleClick} />
    </div>
  )
}

const ExampleGrandchild = (props) => {
  return (
    <p onClick={props.handleClick}>hi</p>
  )
}

段落标签阻止了我的div的onClick处理程序

1 个答案: