title: ReactJS - How to get onFocus and onBlur to work
body: <p>As I understand it, <code>onFocus</code> should be called when the input box is clicked into, and <code>onBlur</code> should be called when something else becomes the focus. </p>
  
  <p><em>My intentions:</em> I would like to call a function that, when activated by a click, it will <code>.concat</code> the message string of the input box in focuse, but I can't get the <code>onFocus</code> or <code>onBlur</code> to work.</p>
  
  <p>From what I've found searching around, this should do the trick, but doesn't.</p>
  
  <pre><code>import React, { Component } from 'react'
  class SocialPost extends Component {
      state = {
          message: this.props.socialPost.message,
          focus: false
      }
      _onBlur() {
          setTimeout(() =&gt; {
              if (this.state.focus) {
                  this.setState({
                      focus: false,
                  });
              }
          }, 0);
      }
      _onFocus() {
          if (!this.state.focus) {
              this.setState({
                  focus: true,
              });
          }
      }
      render() {
          return (
              &lt;div className='...'&gt;
                  &lt;div className='...'&gt;
                      ...
                      &lt;input
                          onFocus={this._onFocus()}
                          onBlur={this._onBlur()}
                          type='text'
                          value={this.state.message}
                          onChange={...}/&gt;
                      ...
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  export default SocialPost
  </code></pre>
  
  <ol>
  <li>Why is <code>onFocus</code> and <code>onBlur</code> called when the component is rendered before I click/unclick them?</li>
  <li>How do I get this <code>onFocus</code> and <code>onBlur</code> to work, is is there another way to focus on the activated input box?</li>
  </ol>