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 {
      subm         


        

Answer 1

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 (
            

                 this.name = n }
                    type="text"
                />

                Search
            
        );
    }
}

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 (
                

                    

                    Search
                
            );
        }
    }

    export default Search;

Hope it will help you.