자녀가 클릭 된 경우를 제외하고 토글 클래스

Question

클릭하여 숨기거나 표시 할 수있는 헤더가 있어야합니다. 그러나이 머리글에는 하위 요소의 일부가 될 단추 그룹이 있습니다. 이 버튼을 클릭하면 모든 것이 무너지는 것을 원하지 않습니다.

어떻게해야합니까? 내가 지금까지 아이 당신은 stopPropagation()을 사용할 수 있어야

event.stopPropagation() 

Answer 1

이 줄을 추가 부모와 자녀의 onClick 이벤트 핸들러에서 row

class Parent extends Component { 
    constructor() { 
     super(); 

     this.state = { 
      show: false 
     } 
    } 

    render() { 
     return (
      <div className="row" onClick={() => this.setState({show: !this.state.show})}> 
       <div className="col-2"> 
        <Child/> 
       </div> 
       ... 
      </div> 
     ) 
    } 
} 

Answer 2

, 아래에 있기 때문에, 모든 축소하려고 한 이벤트 핸들러에서 버튼에 대한 버블 링을 방지합니다. API에 대한 자세한 내용은 http://facebook.github.io/react/docs/events.html을 참조하십시오.

class Child extends Component { 
    handleClick(event) { 
     event.stopPropagation(); 
     doSomething(); 
    } 

    render() { 
     return (
      <button onClick={e => this.handleClick(e)}> 
       Click Me! 
      </button> 
     ); 
    } 
}