cocacrave cocacrave - 13 days ago 8
React JSX Question

React stateless component this.refs..value?

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?

I know this isn't correct now after researching but how are you supposed to get value from these input fields?

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>
)
}
}


this is the stateless inputfield

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>
)

Answer

Refs are unavailable in stateless components. From React Docs:

Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API. Without an imperative API, there isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.