Unable to Grab value from Textfield in React?

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

}

binding issue, use arrow function for that like: onClick = () => { as well as don't use string refs, as per doc: We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you're currently using this.refs.textInput to access refs, we recommend the callback pattern instead. facebook.github.io/react/docs/… — Mayank Shukla
– Mayank Shukla, Commented Jun 16, 2017 at 12:58
Possible duplicate of Unable to access React instance (this) inside event handler — Andrew Li
– Andrew Li, Commented Jun 16, 2017 at 12:59
Possible duplicate of Cannot read property of undefined when using map to render components — Shubham Khatri
– Shubham Khatri, Commented Jun 16, 2017 at 13:06
make use of ref callback instead of string refs. stackoverflow.com/questions/38093760/… — Shubham Khatri
– Shubham Khatri, Commented Jun 16, 2017 at 13:07

Developia · Accepted Answer · 2017-06-16 20:51:50Z

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

}

Collectives™ on Stack Overflow

Unable to Grab value from Textfield in React?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related