Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get form data from input fields in React

The constructor and function:

constructor(props) {
    super(props);

    this.state = {
        tagline: 'We rank what people are talking about.',
        year: new Date().getFullYear()
    };

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

onFormSubmit(e) {
    console.log('onFormSubmit', e)
    console.log('this.state', this.state);
};

The form (classNames removed for clarity):

<form onSubmit={ this.onFormSubmit }>
    <div className="fl w100">
        <div>
            <input type="text" id="email" value={ this.state.email }/>
            <label htmlFor="email">Email</label>
        </div>
    </div>

    <div className="fl w100">
        <div>
            <input type="password" id="password" value={ this.state.password }/>
            <label htmlFor="password">Password</label>
        </div>
    </div>

    <button type="submit">
        Login
    </button>
</form>

This is what logs out, note no email or password information:enter image description here

Full Login component code


import React from 'react';

class Login extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            tagline: 'We rank what people are talking about.',
            year: new Date().getFullYear()
        };

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

    onFormSubmit(e) {
        console.log('onFormSubmit', e)
        console.log('this.state', this.state);
    };

    render() {
        return (<div className="app">
            <div className="welcome">
                <header>
                    <div className="wikitags-logo">
                        <img src="imgs/wikitags-logo.png"/>
                    </div>
                    <h2>Admin Portal</h2>
                    <p>{ this.state.tagline }</p>
                </header>

                <section className="login-form">
                    <form onSubmit={ this.onFormSubmit }>
                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="text" id="email" value={ this.state.email }/>
                                <label className="mdl-textfield__label" htmlFor="email">Email</label>
                            </div>
                        </div>

                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="password" id="password" value={ this.state.password }/>
                                <label className="mdl-textfield__label" htmlFor="password">Password</label>
                            </div>
                        </div>

                        <button type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                            Login
                        </button>
                    </form>
                </section>

                <footer>
                    &copy; { this.state.year } WikiTags
                </footer>
            </div>
        </div>);
    }
}

export default Login;
like image 544
Leon Gaban Avatar asked Apr 29 '17 15:04

Leon Gaban


People also ask

How do I get data from form event?

Grabbing data from a FormData object If you want to snitch into a FormData object visit the example HTML form in a browser and place a breakpoint on console. log(event. formData) . Fill and submit the form with the browser's console opened and save the object as a global variable.

How does React handle form data?

Handling Forms In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute.


1 Answers

Suggestions:

1. You are using value property with input fields but you didn't defined the onChange method so your input fields will be read-only because state value will not get updated.

2. You need to define a onChange event will all the input fields or make them uncontrolled element by removing the value property.

3. In case of uncontrolled element define the ref to each field and to access the value use this.ref_name.value.

By Defining the onChange event:

Define the name property to each input element (name should be same as state variable name it will help to update the state and we can handle all the change in single onChange function) like this:

<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}

By Uncotrolled element:

<input type="text" ref={el => this.el = el} />

Now inside onSubmit function use this.el.value to access he values of this input field.

Check this answer for reference: https://stackoverflow.com/a/43695213/5185595

like image 73
Mayank Shukla Avatar answered Sep 21 '22 11:09

Mayank Shukla