How to get values from input types using this.refs in reactjs?

Question

Not able to get values of input type using this.refs... how to get that values from input type

   export class BusinessDetailsForm extends Component {
      submitForm(data) {
        console.log(this.refs.googleInput.value)
        }
      }
      reder() {
        return(
          <form onSubmit={this.submitForm}>
            <Field type="text"
              name="location"
              component={GoogleAutoComplete}
              id="addressSearchBoxField"
              ref="googleInput"
            />
          </form>
        )
      }
    }

Anjan Kant · Accepted Answer · 2019-04-11 11:51:22Z

29

You should avoid ref="googleInput" as it is now considered legacy. You should instead declare

ref={(googleInput) => { this.googleInput = googleInput }}

Inside of your handler, you can use this.googleInput to reference the element.

Then inside of your submitForm function, you can obtain the text value with this.googleInput._getText()

String refs are legacy https://facebook.github.io/react/docs/refs-and-the-dom.html

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. 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.

Edit

From React 16.3, the format for creating refs are:

class Component extends React.Component 
{
        constructor() 
        {
            this.googleInput = React.createRef();
        }

        render() 
        {
            return 
            (
                <div ref={this.googleInput}>
                    {/* Details */}
                </div>
            );
        }
    }

edited Apr 11, 2019 at 11:51

Anjan Kant

4,34644 silver badges41 bronze badges

answered Mar 31, 2017 at 9:49

Dan

8,9229 gold badges46 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Over a year ago

@ShubhamKhatri Please consider downvoting if you feel this answer does not contribute to the question. The OP asked how to use ref to obtain the value of an input field, this answer provides a solution to help satisfy that.

Thidasa Pankaja Over a year ago

This doesn't work. I'm getting an error saying Uncaught TypeError: _this.googleInput._getText is not a function

Phil Over a year ago

Minus 1 for still using _getText(). It should be this.googleInput.current.value

mohitSehgal · Accepted Answer · 2019-02-04 07:33:46Z

18

using ref={ inputRef => this.input = inputRef } is considered legacy now. In React 16.3 onwards, you can use the code below,

class MyForm extends React.Component {
    constructor(props) {
        //...
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

EDIT: thanks for the comment @stormwild

edited Feb 4, 2019 at 7:33

answered Sep 11, 2018 at 6:36

mohitSehgal

4445 silver badges10 bronze badges

2 Comments

stormwild Over a year ago

React.createRef was introduced in React 16.3. If you're using an earlier version of React callback refs is recommended. reactjs.org/docs/refs-and-the-dom.html

Siluveru Kiran Kumar Over a year ago

how can we set the value of input tags using refs?

Hamza MHIRA · Accepted Answer · 2021-07-01 12:38:08Z

14

In case any one is wondering how to implement ref with hooks :

// Import
import React, { useRef } from 'react';


const Component = () => {
    // Create Refs
    const exampleInput = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
   
         const inputTest = exampleInput.current.value;

     }

    return(
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={exampleInput} />
            </label>
            <input type="submit" value="Submit" />
        </form>
}

edited Jul 1, 2021 at 12:38

Hamza MHIRA

1571 silver badge11 bronze badges

answered Nov 9, 2020 at 13:13

PedroMiotti

1,16411 silver badges13 bronze badges

Comments

Johib Khan · Accepted Answer · 2017-03-31 10:55:42Z

8

getValue: function() {
    return this.refs.googleInput.value;
  }

answered Mar 31, 2017 at 10:55

Johib Khan

2251 gold badge2 silver badges13 bronze badges

Comments

adrice727 · Accepted Answer · 2017-03-31 16:27:26Z

6

I think the more idiomatic way is to use state instead of refs, although it's a little more code in this case since you only have a single input.

export class BusinessDetailsForm extends Component {

  constructor(props) {
    super(props);
    this.state = { googleInput: '' };
    this.defaultValue = 'someValue';
    this.handleChange = this.handleChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  handleChange(e) {
    const { field, value } = e.target;
    this.setState({ [field]: value });
  }
  submitForm() {
    console.log(this.state.googleInput);
  }
  render() {
    return (
      <Formsy.Form onSubmit={this.submitForm} id="form_validation">
        <Field type="text"
          name="googleInput"
          onChange={this.handleChange}
          component={GoogleAutoComplete}
          floatingLabelText="location"
          hintText="location"
          id="addressSearchBoxField"
          defaultValue={this.defaultValue}
          onSelectPlace={this.handlePlaceChanged}
          validate={[ required ]}
        />
      </Formsy.Form>
    );
  }
}

See https://facebook.github.io/react/docs/forms.html#controlled-components.

answered Mar 31, 2017 at 16:27

adrice727

1,49212 silver badges17 bronze badges

3 Comments

Joshua Underwood Over a year ago

I have always preferred the handleChange method you're using here. I know this is an old post, but in case someone sees this answer here is a slightly more "sugary" syntax handleChange = ({ target: { name, value } }) => this.setState({ [ name ]: value });

Daydream Nation Over a year ago

Keeping a text input's value in state can bring a whole list of re-rendering headaches for child components; using a ref avoids this and is fine practice.

adrice727 Over a year ago

@DaydreamNation I'm not sure what the headaches are. Per the React docs, "The standard way to achieve this is with a technique called “controlled components.”

Navneet kumar · Accepted Answer · 2019-02-05 05:59:15Z

2

Using RN 0.57.8 when tried this.googleInput._getText(), It resulted in error _getText is not a function so i printed this.googleInput in console and found that _getText() is a function inside _root

this.googleInput._root._getText()
this.googleInput._root._lastNativeText - This will return the last state not the current state please be careful while using it.

answered Feb 5, 2019 at 5:59

Navneet kumar

2,0042 gold badges23 silver badges29 bronze badges

1 Comment

Uday Over a year ago

although, the exact _root._getText() didnt give me exact thing i was looking for. your thinking process to get related methods along with react extention in chrome helped me get the required method.

yestema · Accepted Answer · 2018-08-14 00:43:09Z

1

In 2018 you should write in constructor this: In constructor of class you should add something like this.input = React.createRef()

Examples here: https://reactjs.org/docs/uncontrolled-components.html

edited Aug 14, 2018 at 0:43

answered Jul 31, 2018 at 1:18

yestema

8,3604 gold badges25 silver badges29 bronze badges

Comments

NULL pointer · Accepted Answer · 2018-10-19 04:21:33Z

1

I tried the answer above (https://stackoverflow.com/a/52269988/1978448) and found it only worked for me when I put the refs in the state, but not when I just made them properties of the component.

Constructor:

this.state.refs={
  fieldName1: React.createRef(),
  fieldName2: React.createRef()
};

and in my handleSubmit I create a payload object to post to my server like this:

var payload = {
  fieldName1: this.state.refs.fieldName1.current.value,
  fieldName2: this.state.refs.fieldName2.current.value,
}

answered Oct 19, 2018 at 4:21

NULL pointer

1,4172 gold badges18 silver badges31 bronze badges

Comments

bjoern · Accepted Answer · 2018-11-11 14:58:07Z

1

The react docu explains it very well: https://reactjs.org/docs/refs-and-the-dom.html

this is considered legacy:

yourHandleMethod() {
  this.googleInput.click();
};

yourRenderCode(){
  ref={(googleInput) => { this.googleInput = googleInput }}
};

whereas, this is considered the way to go:

constructor(props){
  this.googleInput = React.createRef();
};
yourHandleMethod() {
  this.googleInput.current.click();
};
yourRenderCode(){
  <yourHTMLElement
    ref={this.googleInput}
  />
};

answered Nov 11, 2018 at 14:58

bjoern

3913 silver badges3 bronze badges

Comments

Alex · Accepted Answer · 2019-08-12 09:35:54Z

From React 16.2, you can use: React.createRef

See more: https://reactjs.org/docs/refs-and-the-dom.html

1. using ref={ inputRef => this.input = inputRef }

Exam:

import React, { Component } from 'react';

class Search extends Component {
    constructor(props) {
        super(props);

        this.name = React.createRef();

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.props.onSearch(`name=${this.name.value}`);
    }

    render() {
        return (
            <div>
                <input
                    className="form-control name"
                    ref={ n => this.name = n }
                    type="text"
                />

                <button className="btn btn-warning" onClick={ this.handleClick }>Search</button>
            </div>
        );
    }
}

export default Search;

ref={ n => this.name = n } Use Callback Refs -> see

Or:

2. this.name.current.focusTextInput()

    class Search extends Component {
        constructor(props) {
            super(props);

            this.name = React.createRef();

            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            this.props.onSearch(`name=${this.name.current.value}`);
        }

        render() {
            return (
                <div>
                    <input
                        className="form-control name"
                        ref={this.name}
                        type="text"
                    />

                    <button className="btn btn-warning" onClick={ this.handleClick }>Search</button>
                </div>
            );
        }
    }

    export default Search;

Hope it will help you.

Collectives™ on Stack Overflow

How to get values from input types using this.refs in reactjs?

10 Answers 10

3 Comments

2 Comments

Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

2 Comments

Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related