title: Outside Click handle event on element
body: <p>can you tell me how can i handle a click on outside of element .For example i have that</p>
  
  <pre><code>&lt;td&gt;&lt;input type="number" className="hour" onKeyDown={this.editInlineHour(this)} /&gt;&lt;/td&gt;
  </code></pre>
  
  <p>and i want only when i click outside of that element to execute some function and that is it in react !</p>
  
  <p>I try it with that </p>
  
  <pre><code>  window.addEventListener('mousedown', this.pageClick, false);
  </code></pre>
  
  <p>but even when i click on input field the function is executed.Thanks
  This is my full code ..basically it is inline edit on field on table.. when i click on that field it show input field.. and i want when i click outside that field do go away </p>
  
  <pre><code>editInlineHour:function () {
  
      },
      showInlineEditHour:function (i) {
          this.setState({
              index:i,
              showInlineHour:true
          })
      },
      showInlineEditStart:function (i) {
          this.setState({
              index:i,
              showInlineStart:true
          })
      },
      showInlineEditEnd:function (i) {
          this.setState({
              index:i,
              showInlineEnd:true
          })
      },
      pageClick:function () {
        this.setState({
            showInlineStart:false,
            showInlineEnd:false,
            showInlineHour:false
        });
      },
      render: function () {
  
          var itemMap = this.state.items.map(function (item, i) {
              var fieldDp1;
              if(this.state.showInlineStart){
                  fieldDp1 = &lt;input id="inlineDp1"  className="flatpickr" data-date-format="m/d/Y"/&gt;
              }else{
                  fieldDp1 = &lt;td onDoubleClick={this.showInlineEditStart.bind(this,i)} &gt;&lt;FormattedDate value={item.startDate}/&gt;&lt;/td&gt;
              }
              var fieldDp2;
              if(this.state.showInlineEnd){
                  fieldDp2 = &lt;input id="inlineDp2"  className="flatpickr" data-date-format="m/d/Y" /&gt;
              }else{
                  fieldDp2 = &lt;td onDoubleClick={this.showInlineEditEnd.bind(this,i)}&gt;&lt;FormattedDate value={item.endDate}/&gt;&lt;/td&gt;
              }
              var fieldHours;
              if(this.state.showInlineHour){
                  fieldHours = &lt;td&gt;&lt;input type="number" className="hour" onKeyDown={this.editInlineHour(this)} /&gt;&lt;/td&gt;
              }else{
                  fieldHours =  &lt;td  onDoubleClick={this.showInlineEditHour.bind(this,i)} &gt;{item.workInHours}&lt;/td&gt;
  
              }
              return (
                  &lt;tr key={i}&gt;
                      &lt;td&gt;&lt;input type="checkbox" checked={item.selected} onClick={this.handleChange.bind(this,i)} /&gt;&lt;/td&gt;
                      {fieldDp1}
                      {fieldDp2}
                      {fieldHours}
                      &lt;td&gt;&lt;label type="button" onClick={this.handleShowModal.bind(this,i)}&gt;&lt;img height="30px" src="moliv.jpg"/&gt;&lt;/label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              );
  
          }.bind(this));
          return (
              &lt;div&gt;
                  &lt;button className="btn btn-primary center-block" onClick={this.addElem}&gt;Add&lt;/button&gt;
                  {this.state.list.theList.length &gt; 0 ?  &lt;button className="btn btn-primary" onClick={this.putResult}&gt;Put result&lt;/button&gt; :null}
                  &lt;table className="table scroll2"&gt;
                      &lt;thead&gt;
                      &lt;tr className="danger"&gt;
                          &lt;th&gt;&lt;input  type="checkbox" checked={this.state.allChecked} onClick={this.toggleAll}/&gt;&lt;/th&gt;
                          &lt;th&gt;Start Date&lt;/th&gt;
                          &lt;th&gt;End Date&lt;/th&gt;
                          &lt;th&gt;Hours&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      {itemMap}
  
                      &lt;/tbody&gt;
  
                  &lt;/table&gt;
                  {this.state.items.length &gt; 0 ? &lt;button  type="button" className="btn btn-danger" onClick={this.deleteItems}&gt;Remove&lt;/button&gt; : null}
                  &lt;Modal parentState={this.state} modalPropsId={this.props.theProps.id} handleHideModal={this.handleHideModal}/&gt;
              &lt;/div&gt;
          );
  </code></pre>