React.js中的抽屜

Question

我有一個抽屜組件，帶有一個打開此抽屜的按鈕。 我想通過點擊抽屜區域以外的任何地方關閉抽屜。我試過這段代碼。它適用於開放，但它不適用於關閉。

var Child = React.createClass({ 
    render: function() { 
    return (
     <div className="chatBar"> 
      <div onClick={this.onClick} className="closeBTN"> 
       <img src="../src/contents/images/svg/close.svg"/> 
      </div> 

      <Tab /> 
     </div> 
     ); 
    } 
}); 

var ChatBar = React.createClass({ 
    getInitialState: function() { 
    return { childVisible: false ,childInVisible: true ,}; 

    }, 

    render: function() { 
    return(
     <div> 
     <div onClick={this.onClick} className="chatBTN"> 
     <img src="../src/contents/images/svg/chat.svg"/> 
     </div> 
     { 
      this.state.childVisible 
      ? <Child /> 
      : null 
     } 
     </div> 
    ) 
    }, 

    onClick: function() { 
    this.setState({childVisible: !this.state.childVisible}); 
    }, 

    onClickClose: function(){ 
    this.setState({childInVisible: !this.state.childInVisible}); 
    }, 
}); 

export default ChatBar; 

Answer 1

請檢查工作演示JSFiddle。

var Child = React.createClass({ 
    render: function() { 
    return (
     <div className="chatBar"> 
      <div onClick={this.props.onClick} className="closeBTN"> 
       <img src="http://www.freeiconspng.com/uploads/silver-close-button-png-15.png"/> 
      </div> 
     </div> 
     ); 
    } 
}); 

var ChatBar = React.createClass({ 
    getInitialState: function() { 
    return { childVisible: false }; 

    }, 

    render: function() { 
    return(
     <div> 
     <div onClick={this.onToggle} className="chatBTN"> 
     <img src="http://www.omeglechat.eu/wp-content/uploads/2016/10/omegle-mnogochat.png"/> 
     </div> 
     { 
      this.state.childVisible 
      ? <Child onClick={this.onToggle.bind(this)} /> 
      : null 
     } 
     </div> 
    ) 
    }, 

    onToggle: function() { 
    this.setState({childVisible: !this.state.childVisible}); 
    } 
}); 


React.render(<ChatBar />, document.body); 

首先，用一個標誌在state：

onToggle: function() { 
    this.setState({childVisible: !this.state.childVisible}); 
    } 

其次，爲了在子組件調用一個函數（onClick），你需要通過<Child onClick={this.onToggle.bind(this)} />在處理程序通過，在子組件中調用它onClick={this.props.onClick}