title: ReactJS onBlur not working
body: <p>I have:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  export default class DarkLabel extends React.Component {
  
      componentWillMount() {
          this.setState({
              editing: false,
              content: this.props.content
          })
      }
  
      handleEditing(e) {
          this.setState({
              content: e.target.value
          });
          console.log(e.target)
          this.props.edit_callback(e.target.value);
      }
  
      truncate(limit) {
          var content = '';
          if (this.state.content.length &gt; limit) {
              content = &lt;abbr title={this.state.content}&gt;
                  {this.props.right_icon 
                       ? this.state.content.substr(0, (limit - 7)) + '...' 
                       : this.state.content.substr(0, (limit - 2)) + '...'}
              &lt;/abbr&gt;
          } else {
              content = this.state.content;
          }
          return content;
      }
  
      onBlur() {
          alert('test')
          }
  
      render() {
          var icon = '', content = '', contentRaw = this.state.content;
          var rightIcon = '';
          if (this.props.icon &amp;&amp; this.props.icon.indexOf('.png') != -1) {
              icon = &lt;div className="icon"&gt;&lt;img src={this.props.icon}/&gt;&lt;/div&gt;
          }
          else if (this.props.icon) {
              icon = &lt;div className="icon"&gt;{this.props.icon}&lt;/div&gt;
          }
          if (this.props.right_icon) {
              rightIcon = &lt;div className={'pull-right icon'+(this.props.right_icon_callback ? '' : '')}
                  &gt;{this.props.right_icon}&lt;/div&gt;
          }
  
          if (typeof this.state.content !== 'object' &amp;&amp; this.state.content.indexOf('.png') != -1) {
              content = &lt;img height="37" src={this.state.content}/&gt;
          } else {
              contentRaw = content;
              if (this.props.classExtra &amp;&amp; this.props.classExtra.indexOf('lg') != -1) {
                  content = this.truncate(35);
              } else {
                  content = this.truncate(17);
              }
          }
          return (
              &lt;div
                  className={'pull-left dark-label-wrapper '+this.props.classExtra+(this.props.right_icon_callback ? ' pointer' : '')}
                  onClick={(this.props.right_icon_callback ? this.props.right_icon_callback : null)}&gt;
                  {icon}
                  &lt;div className="content"&gt;
                      {this.props.editing ?
                          &lt;input name="labelInput" className="" onBlur={this.onBlur} autoFocus={true} value={this.state.content}
                                 onChange={this.handleEditing.bind(this)}/&gt; : content}
                  &lt;/div&gt;
                  {rightIcon}
                  {this.props.dropdown}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>The onBlur event does absolutely nothing, how can I get this to work? My ultimate goal is to have the input "close" if the user presses enter or clicks off the input.</p>