reactjs는

Question

을 setState를 다른 함수를 호출, 전파를 중지 I는 구성 요소 종료를 클릭 할 때마다 온 클릭이 전체 구성 요소에 첨부 :

<div className="container" onClick={this.onClick.bind(this,'str')}> 
      {this.state.showtoggle ? <Child2 /> : <Child1 />} 
      </div> 

을하지만, 자식 2 구성 요소 안에, 내가 모든 구성 요소가 있어야하지 않으 클릭 할 수 있어야합니다. 1) 클릭 핸들러를 Child1에 첨부 할 수 있습니까?이 조건부 로직을 자리에두고 있습니다. 2) 또는 child2에서 stopPropagation을 시도하고 있습니다. 그러나 preventDefault ...를 수행 한 후 상태가 예상대로 업데이트되지 않습니다. 자식 2 내부

코드 :

handleClick(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
    event.nativeEvent.stopImmediatePropagation(); 
    if(event.target.name === 'b2'){ 
      this.setState({ 
     toggleClassname: 'b2', 
    }); 
    } 
    } 

<button name="b1" onClick={this.handleClick} className={`btn-element ${(this.state.toggleClassname === 'b1') ? 'red' : ''}`}>button1</button> 

<button name="b2" onClick={this.handleClick} className={`btn-element ${(this.state.toggleClassname === 'b2') ? 'red' : ''}`}>button2</button> 

Answer 1

그냥 자식 1에 onClick을 통과 한 후 아이의 버튼에 연결할 수 있습니다 1.

var onClick = this.onClick.bind(this,'str'); 
<div className="container"> 
     {this.state.showtoggle ? <Child2 onClick={onClick} /> : <Child1 onClick={onClick} />} 
     </div> 

자식 1 :

class Child1 extends React.Component { 
    static propTypes = { 
    onClick: React.PropTypes.func 
    } 

    render() { 
    return <button name="b1" onClick={this.props.onClick}>button1</button> 
    } 
} 

어린이 2 :

class Child2 extends React.Component { 
    static propTypes = { 
    onClick: React.PropTypes.func 
    } 

    render() { 
    return <div><img onClick={this.props.onClick}/></div> 
    } 
} 

기본적으로 사용자 정의 구성 요소에 대해 onClick을 수동으로 다시 구현해야하기 때문에 조금 혼란 스럽습니다.