reactjs - react 无状态组件this.refs..value？

我不知道我做的是否正确...
如果我想从输入中获取值，请使用this.refs.whatever.value.trim()，但如果该输入是无状态函数组件，我该如何检索onSubmit的值？

我知道经过研究后这是不正确的，但是您应该如何从这些输入字段中获取值(value)？

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 (
      <form id="application-signup" onSubmit={this._handleSubmit.bind(this)}>
        <InputField type={'email'} name={'email'} text={'email'}
                    helpBlock={'email is required'} ref="email" />
        <InputField type={'password'} name={'password'} text={'password'}
                    helpBlock={'password is required'} ref="password" />
        <InputField type={'password'} name={'confirm'} text={'confirm password'}
                    helpBlock={'password confirmation is required'} ref="confirm" />
        <Button type={'submit'} className={'btn btn-primary'} text={'signup'} />
      </form>
    )
  }
}

这是无状态输入字段

import React from 'react'

export const InputField = (props) => (
  <div className="form-group col-xs-12">
    <label htmlFor={props.name}>{props.text}</label>
    <input type={props.type} name={props.name} className="form-control"
           data-stripe={props.stripe} />
    <span className="help-block">{props.helpBlock}</span>
  </div>
)

最佳答案

编辑:看起来这不再是问题，因为自编写此答案以来，出现了有关如何处理这种情况的新思路。
请参阅inanc的答案，而不是此答案。

引用在无状态组件中不可用。
从React Docs: