Question

我有两个组件，当父点触发OnClick时，具有span元素的子节点根本不会触发OnClick。我在父母是按钮时尝试它并且它完美地工作但是当父母是列表时它不会触发孩子。

class Menu extends Component {
 handleItemClick=(e)=>{
     // whatever ..
 }
 render(){
  return(
   <ul>
     {
       items.map((item, i)=>(
            <li key={i}
                id={i}
                onClick={this.handleItemClick}>
                <Child />
                {item}
            </li>
        ))
     }
   </ul>
  )
}

class Child extends Component {
 handleSpanClick=(e)=>{
     console.log("It works!")
 }
 render(){
  return(
   <span onClick={this.handleSpanClick}></span>
  )
}

Answer 1

这看起来很可能是因为跨度默认为内联元素，如果您没有设置样式，它将具有0宽度，因此它不会有可点击区域。尝试放入一些文本，以便它实际上有一个可点击的区域来测试。如果这适用于CSS（显示：块，宽度，高度等）。

Answer 2

@ bunion的答案是对的！

它不会触发您的handleSpanClick()处理程序，因为您呈现的<span></span>为空。

要么在其中放置一些内容，要么调整CSS显示属性 - 将其更改为block或inline-block并添加一些height和width。在开发过程中，您还可以设置背景颜色，这样您实际上可以看到<span></span>的位置。

你的代码很好。这是一个证明，运行此片段：

＆＃13;

class Menu extends React.Component {
  handleItemClick=(e)=>{ /* whatever .. */ }
  render() {
    return(
      <ul>
        { this.props.items.map((item, i) => (
          <li key={i} id={i}
            onClick={this.handleItemClick}>
            <Child />
          {item}
          </li>
        ))}
      </ul>
    )
  }
}

class Child extends React.Component {
  handleSpanClick=(e)=>{ console.log("It works!"); }
  render(){
    return (
      <span onClick={this.handleSpanClick}>
        CLICK ME (I am span)
      </span>
    );
  }
}

ReactDOM.render(<Menu
  items={[
    '-- I am list item, 1',
    '-- I am list item, 2',
    '-- I am list item, 3'
  ]} />,
  document.getElementById('app')
);

＆＃13;

/* So we could see better where it is */
span {
  background-color: lightgreen;
  cursor: pointer;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

span不会触发OnClick内部列表反应子组件

2 个答案: