reactjs остановить распространение, вызвать другую функцию SetState

Question

У меня есть OnClick прилагается ко всему компоненту, где бы щелкнул закрывает компонент:

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

Но внутри компонента Child2, я не хочу, чтобы весь компонент должен быть кликабельным. 1) Могу ли я присоединить обработчик кликов только к Child1 - с этой условной логикой на месте 2) Или я пытаюсь остановитьPropagation в child2 - но состояние не обновляется, как ожидается, после того, как preventDefault ... любая идея?

Код внутри Child2:

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

Вы можете просто передать onClick к ребенка1, а затем прикрепить его к кнопке в ребенка 1.

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

Child1:

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

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

Child2:

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

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

По существу вам просто нужно вручную переопределить onClick для вашего настраиваемого компонента, что немного запутывает.