스팬이 실행되지 않음 스킨이 실행되지 않음 OnClick 내부 목록에 반응하는 자식 구성 요소

Question

스핀 요소가있는 자식이 OnClick에 의해 부모 트리거가 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 (display : 블록, 너비, 높이 등)로 스타일을 지정합니다.

Answer 2

@ bunion의 답변은 정확합니다!

렌더링중인 <span></span>이 비어 있기 때문에 handleSpanClick() 처리기가 실행되지 않습니다.

거기에 일부 내용을 배치, 또는 중 하나는 CSS 디스플레이 속성을 조정할 어느 - block 또는 inline-block로 변경하고 height 및 width 일부를 추가합니다. 개발하는 동안 배경색을 설정할 수도 있으므로 실제로 <span></span>의 위치를 ​​볼 수 있습니다.

코드가 괜찮습니다. 여기가 증명이 코드를 실행의 : 블록, 폭, 높이 :

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') 
 
);

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

<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>