title: Reactjs: unfocusing a button element using .blur()
body: <p>I'm having a little issue whilst learning react - I'd like to unfocus (a.k.a <code>blur()</code>) a button DOM element, but for some reason this isn't quite working.</p>
  
  <p>I think the issue, from what I can read, is around the use of the reactstrap <code>Button</code> component:</p>
  
  <pre><code>&lt;Button className={buttonClass} onClick={this.handleCopyToClipboardClick} ref={this.buttonBlurRef}&gt;
    &lt;div className="d-flex justify-content-between"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;{ this.state.hasCopiedToClipboard ? 'Copied to clipboard!' : this.state.buttonText }&lt;/span&gt;
      &lt;span&gt;&lt;FontAwesomeIcon icon="copy" /&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p>I'm binding a ref on a component? I think this is why it's not working.</p>
  
  <p>The <code>onClick</code> function is working, which I have included below. I've including some commented out code out of things I have tried - all of which break the <code>handleCopyToClipboardClick</code> function.</p>
  
  <pre><code>handleCopyToClipboardClick() {
    this.setState(state =&gt; ({
      hasCopiedToClipboard: !state.hasCopiedToClipboard
    }));
  
    // this.buttonBlurRef.current.blur(); &lt;= This isn't working
  
    // this.buttonBlurRef.blur(); &lt;= This isn't working either
  
    // this.refs.buttonBlurRef.current.blur(); &lt;= Or this
  
    // this.refs.buttonBlurRef.blur(); &lt;= Nor this... :'(
  
    setTimeout(
      function() {
        this.setState(state =&gt; ({
          hasCopiedToClipboard: !state.hasCopiedToClipboard
        }));
      }.bind(this),
      1500
    );
  }
  </code></pre>
  
  <p>Here is my Component constructor as well:</p>
  
  <pre><code>constructor(props) {
    super(props);
    this.buttonBlurRef = React.createRef();
  
    this.state = {
      hasCopiedToClipboard: false,
    };
  
    this.handleCopyToClipboardClick = this.handleCopyToClipboardClick.bind(this);
  }
  </code></pre>
  
  <p>Any advise on how I could potentially unfocus my Bootstrap <code>Button</code> would be great! :)</p>