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在子组件中调用函数()，需要通过 传入handler <Child onClick={this.onToggle.bind(this)} />，并在子组件中通过onClick={this.props.onClick}