reactjs停止傳輸，調用另一個函數以SETSTATE

Question

我有一個onClick附加到整個組件，只要點擊它關閉部分：

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

不過的child2組件內，我不希望整個組件應可點擊。 1）我可以將點擊處理程序只附加到Child1 - 與此條件邏輯 2）或者我試圖阻止在child2Propagation - 但狀態沒有像預期的那樣得到更新後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，然後將其附加到按鈕在兒童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，這有點令人困惑。