Реагирование прекращает распространение, вызывает другую функцию для setState

Question

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

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

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

Код внутри 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 для Child1, а затем прикрепите его к кнопке в Child 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 для вашего пользовательского компонента, который немного сбивает с толку.