title: React stateless component this.refs..value?
body: <p>I don't know if I'm doing this correctly...
  If I want to get value from an input I use this.refs.whatever.value.trim() but if that input is a stateless function component how do I do retrieve the value onSubmit?</p>
  
  <p>I know this isn't correct now after researching but how are you supposed to get value from these input fields?</p>
  
  <pre><code>import React, {Component} from 'react'
  
  import {InputField} from '../components/forms/InputField'
  import {Button} from '../components/forms/Button'
  
  export default class SignupWrapper extends Component {
    _handleSubmit(e) {
      e.preventDefault();
      const email = this.refs.email.value.trim();
      const password = this.refs.password.value.trim();
      const confirm = this.refs.confirm.value.trim();
      console.log({email, password, confirm});
    }
  
    render() {
      return (
        &lt;form id="application-signup" onSubmit={this._handleSubmit.bind(this)}&gt;
          &lt;InputField type={'email'} name={'email'} text={'email'}
                      helpBlock={'email is required'} ref="email" /&gt;
          &lt;InputField type={'password'} name={'password'} text={'password'}
                      helpBlock={'password is required'} ref="password" /&gt;
          &lt;InputField type={'password'} name={'confirm'} text={'confirm password'}
                      helpBlock={'password confirmation is required'} ref="confirm" /&gt;
          &lt;Button type={'submit'} className={'btn btn-primary'} text={'signup'} /&gt;
        &lt;/form&gt;
      )
    }
  }
  </code></pre>
  
  <p>this is the stateless inputfield</p>
  
  <pre><code>import React from 'react'
  
  export const InputField = (props) =&gt; (
    &lt;div className="form-group col-xs-12"&gt;
      &lt;label htmlFor={props.name}&gt;{props.text}&lt;/label&gt;
      &lt;input type={props.type} name={props.name} className="form-control"
             data-stripe={props.stripe} /&gt;
      &lt;span className="help-block"&gt;{props.helpBlock}&lt;/span&gt;
    &lt;/div&gt;
  )
  </code></pre>