Unable to Grab value from Textfield in React? - reactjs

Question

Code is given below. where there is a form and I want to get value from textfield of FullName and Email but I am getting error of undefined property for email. I want to access the Text field value. How can I do that i this is not propare way. Note that I am not fluent in React.
Error I am Getting in my COde is Given below.
index.js?aa0c:21 Uncaught TypeError: Cannot read property 'email' of undefined
at Object.onClick (eval at ./app/containers/LoginPage/index.js (http://localhost:3001/0.chunk.js:7:1), <anonymous>:104:27)
at Object.proxiedMethod [as onClick] (eval at ./node_modules/react-proxy/modules/createPrototypeProxy.js (http://localhost:3001/main.js:2282:1), <anonymous>:44:30)
at EnhancedButton._this.handleClick (webpack:///./~/material-ui/internal/EnhancedButton.js?:144:21)
at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./~/react-dom/lib/ReactErrorUtils.js?:69:16)
at executeDispatch (webpack:///./~/react-dom/lib/EventPluginUtils.js?:85:21)
at Object.executeDispatchesInOrder (webpack:///./~/react-dom/lib/EventPluginUtils.js?:108:5)
at executeDispatchesAndRelease (webpack:///./~/react-dom/lib/EventPluginHub.js?:43:22)
at executeDispatchesAndReleaseTopLevel (webpack:///./~/react-dom/lib/EventPluginHub.js?:54:10)
at Array.forEach (native)
at forEachAccumulated (webpack:///./~/react-dom/lib/forEachAccumulated.js?:24:9)
at Object.processEventQueue (webpack:///./~/react-dom/lib/EventPluginHub.js?:257:7)
this is my index.js file.
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import TextField from 'material-ui/TextField';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import DatePicker from 'material-ui/DatePicker';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { GridList, GridTile } from 'material-ui/GridList';
import Checkbox from 'material-ui/Checkbox';
import RaisedButton from 'material-ui/RaisedButton';
export default class Login extends Component {
state = {
value: null,
};
onClick() {
const text = this.refs.email.getValue();
console.log("when clicking, the form data is:", text);
console.log(this.refs.email.getValue());
}
handleChange = (event, index, value) => this.setState({ value });
render() {
return (
<div className="md-card">
<div className="md-card-content large-padding">
<form id="form_validation" className="uk-form-stacked" >
<div className="uk-grid" data-uk-grid-margin>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<TextField
ref={(input) => { this.fullname = input; }}
floatingLabelText="Full Name"
fullWidth={true}
/>
</div>
</div>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<TextField
hintText=""
ref='email'
floatingLabelText="Email"
fullWidth={true}
/>
</div>
</div>
</div>
<div className="uk-grid" data-uk-grid-margin>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<DatePicker
hintText="Birthdate"
container="inline"
mode="landscape"
fullWidth={true}
/>
</div>
</div>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<label className="uk-form-label">Gender:</label>
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light" >
<RadioButton
value="Male"
label="Male"
/>
<RadioButton
value="Female"
label="Female"
/>
</RadioButtonGroup>
</div>
</div>
</div>
<div className="uk-grid">
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<label className="uk-form-label">Hobbies:</label>
<span className="icheck-inline">
<Checkbox
label="Skiing"
/>
</span>
<span className="icheck-inline">
<Checkbox
label="Running"
/>
</span>
<span className="icheck-inline">
<Checkbox
label="Reading"
/>
</span>
<span className="icheck-inline">
<Checkbox
label="Swimming"
/>
</span>
</div>
</div>
<div className="uk-width-medium-1-2">
<SelectField
floatingLabelText="Press?"
value={this.state.value}
onChange={this.handleChange}
>
<MenuItem value={null} primaryText="" />
<MenuItem value={false} primaryText="Internet" />
<MenuItem value={true} primaryText="Words of Mouth" />
</SelectField>
</div>
</div>
<div>
<TextField
hintText=""
floatingLabelText="Message"
multiLine={true}
rows={2}
rowsMax={4}
fullWidth={true}
/>
</div>
<RaisedButton label="Primary" primary={true} onClick={this.onClick} />
</form >
</div>
</div>
);
}
}

Answer 1

Getting value of components (ex. Inputs) using ref is not right way in Reactive Functional Programming. (Read this: https://facebook.github.io/react/docs/forms.html)
Try to listen on change event of each Input and keep they changes into state, so you can provide a value to them and control them. This will able you to have values, clean them up or change them from somewhere else.
Here is your code with controlled inputs of fullname and email.
Also you can check this out in material-ui docs (under Controlled Example section of each component).
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import TextField from 'material-ui/TextField';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import DatePicker from 'material-ui/DatePicker';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { GridList, GridTile } from 'material-ui/GridList';
import Checkbox from 'material-ui/Checkbox';
import RaisedButton from 'material-ui/RaisedButton';
export default class Login extends Component {
state = {
value: null,
fullname: ""
email: ""
};
onClick() {
console.log(this.state.fullname);
console.log(this.state.email);
}
handleChange = (event, index, value) => this.setState({ value });
render() {
return (
<div className="md-card">
<div className="md-card-content large-padding">
<form id="form_validation" className="uk-form-stacked" >
<div className="uk-grid" data-uk-grid-margin>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<TextField
ref={(input) => { this.fullname = input; }}
floatingLabelText="Full Name"
fullWidth={true}
value={this.state.fullname}
onChange={(event, value) => { this.setState({ fullname: value }); }}
/>
</div>
</div>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<TextField
hintText=""
ref='email'
floatingLabelText="Email"
fullWidth={true}
value={this.state.email}
onChange={(event, value) => { this.setState({ email: value }); }}
/>
</div>
</div>
</div>
<div className="uk-grid" data-uk-grid-margin>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<DatePicker
hintText="Birthdate"
container="inline"
mode="landscape"
fullWidth={true}
/>
</div>
</div>
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<label className="uk-form-label">Gender:</label>
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light" >
<RadioButton
value="Male"
label="Male"
/>
<RadioButton
value="Female"
label="Female"
/>
</RadioButtonGroup>
</div>
</div>
</div>
<div className="uk-grid">
<div className="uk-width-medium-1-2">
<div className="parsley-row">
<label className="uk-form-label">Hobbies:</label>
<span className="icheck-inline">
<Checkbox
label="Skiing"
/>
</span>
<span className="icheck-inline">
<Checkbox
label="Running"
/>
</span>
<span className="icheck-inline">
<Checkbox
label="Reading"
/>
</span>
<span className="icheck-inline">
<Checkbox
label="Swimming"
/>
</span>
</div>
</div>
<div className="uk-width-medium-1-2">
<SelectField
floatingLabelText="Press?"
value={this.state.value}
onChange={this.handleChange}
>
<MenuItem value={null} primaryText="" />
<MenuItem value={false} primaryText="Internet" />
<MenuItem value={true} primaryText="Words of Mouth" />
</SelectField>
</div>
</div>
<div>
<TextField
hintText=""
floatingLabelText="Message"
multiLine={true}
rows={2}
rowsMax={4}
fullWidth={true}
/>
</div>
<RaisedButton label="Primary" primary={true} onClick={this.onClick} />
</form >
</div>
</div>
);
}
}