title: Why is this.refs undefined?
body: <p>Why is <code>this.refs</code> undefined in the code below?</p>
  
  <pre><code>class NewItem extends React.Component {
    handleClick() {
      console.log(this.refs) //prints out undefined
      const name = this.refs.name.value;
      const description = this.refs.description.value;
      $.ajax({
        url: 'api/v1/items',
        type: 'POST',
        data: {
          item: {
            name: name,
            description: description
          }
        },
        success: (item) =&gt; {
          this.props.handleSubmit(item);
        }
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;input ref='name' placeholder='Enter the name of the item' /&gt;
          &lt;input ref='description' placeholder='Enter the description of the item' /&gt;
          &lt;button onClick={this.handleClick}&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>