title: Deprecation warning using this.refs
body: <p>I have a React component and I want to toggle a css class when clicked.</p>
  
  <p>So I have this:</p>
  
  <pre><code>export class myComponent extends React.Component {
    constructor() {
      super();
      this.state = { clicked: false };
      this.handleClick = this.handleClick.bind(this);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div onClick={this.clicked}&gt;&lt;span ref="btn" className="glyphicon"&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    handleClick() {
      this.refs.btn.classList.toggle('active');
    }
  
    componentDidMount() {
      this.refs.btn.addEventListener('click', this.handleClick);
      this.setState({
        clicked: this.state.clicked = true,
      });
    }
  
    componentWillUnmount() {
      this.refs.btn.removeEventListener('click', this.handleClick);
      this.setState({
        clicked: this.state.clicked = false,
      });
    }
  }
  </code></pre>
  
  <p>This problem is that ESLint keeps telling me "this.refs" is depreciated.</p>
  
  <p>What do I do instead? How can I fix it so it's not using depreciated code?</p>