reactjs停止传播，调用另一个函数来setState

Question

我在整个组件上附加了一个 Onclick，只要单击它就会关闭组件：

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

但是在 child2 组件内部，我不希望整个组件都可以点击。 1）我可以将点击处理程序附加到 Child1 - 使用此条件逻辑 2) 或者我试图在 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 传递给 Child1，然后将其附加到 Child 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，这有点令人困惑。