Drawer in React.js

Question

I have a drawer component with a button that opens this drawer. I want to close the drawer by clicking everywhere on the page except drawer area. I have tried this code. It works for opening but it isn't working for closing.

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;

You can find a solution here http://stackoverflow.com/questions/32553158/detect-click-outside-react-component — Alexandr Lazarev, Oct 27 '16 at 08:02
Or have a look at this tool https://github.com/Pomax/react-onclickoutside — Alexandr Lazarev, Oct 27 '16 at 09:03

Joy · Accepted Answer · 2016-10-27T10:24:59.460

1

Please check the working demo 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);

First, use one flag in the state:

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

Secondly, in order to call a function (onClick) in the child component, you need to pass in the handler through <Child onClick={this.onToggle.bind(this)} />, and call it in the child component through onClick={this.props.onClick}

edited Oct 27 '16 at 10:24

answered Oct 27 '16 at 08:45

Joy

9,430
11
44
95

it doesnt work for me . both works for opening my chat bar but i cant close it.plz help – Yeganeh Salami Oct 27 '16 at 08:57
Please check my answer updated. You may want to go through some reactjs tutorials to get use to the syntax. – Joy Oct 27 '16 at 10:25
tnks alot... can I ask you some more question? how can i close my chat bar by clicking outside of chatbar component? – Yeganeh Salami Oct 28 '16 at 08:36
1

Usually I will do it like this: http://jsfiddle.net/agongdai/kb3gN/16073/ – Joy Oct 28 '16 at 09:02
I dont want toggle btn ... i have a chat icon in my content and aside... i want when user opens chat bar and after that click on menu item on aside ,chatbar close automaticly. tnks for your answers. – Yeganeh Salami Oct 28 '16 at 09:44
Hey man, the idea is already there. You can message the code, tune for your application, by yourself. – Joy Oct 28 '16 at 09:47
can i ask some more question? how can i put transition on it with css react transition? i asked it as a new question in here(http://stackoverflow.com/questions/40318593/css-react-transition).the appear transition is working but in closing the chatbar leave trasition is not working... tnks for your helping – Yeganeh Salami Nov 02 '16 at 06:31

Drawer in React.js

1 Answers1