CODEWITHSUNDEEP
javascriptreactjsjsxaxios
Matthew Farlymn
Matthew Farlymn

Reputation: 45

React form using Axios post

I've been searching the internet for days and cannot seem to find anything related to submitting a form request through React and using Axios post to input the information to our REST API. Every time we submit our register form every value comes up undefined. Is this the best way to have React communicate with our REST API? Also we have tested the API using Postman and know it's working.

var React = require('react');

var Access = React.createClass({
    getInitialState: function() {
        return {
            firstName: '',
            lastName: '',
            email: '',
            password1: ''
        }
    },

    handleSubmit: function(e) {
        var _this = this;
        this.serverRequest = axios
        console.log(_this.ref.firstName)
        .post("/api/Users", {
            userFirstName: _this.ref.firstName,
            userLastName: _this.ref.lastName,
            userEmail: _this.ref.email,
            userPassword: _this.ref.password1
        })
        .then(function(response) {
            console.log(response);
        }) .catch(function (error) {
            console.log(error);
        });
    },

    render: function() {
        return(
            <div>
                <section className="access">
                    <div className="row center-xs container">
                        <div className="col-xs-12 col-sm-4 sign-in">
                            <h1>Sign-In</h1>
                            <form action="/" method="get">
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email"/>
                                <label htmlFor="password">Password</label>
                                <input type="password" name="password" placeholder="Password"/>
                                <input className="button pink" type="submit" value="Sign-In"/>
                                <br/>
                                <input type="checkbox" name="RememberMe"/>
                                <label htmlFor="RememberMe">Remember me</label>
                                <span> | <a href="/">Forgot password?</a></span>
                            </form>
                        </div>
                        <div className="col-xs-12 col-sm-4 register">
                            <h1>Register</h1>
                            <form onSubmit={this.onSubmit}>
                                <label htmlFor="firstName">First Name</label>
                                <input type="text" name="firstName" placeholder="First Name" ref="firstName"/>
                                <label htmlFor="lastName">Last Name</label>
                                <input type="text" name="lastName" placeholder="Last Name" ref="lastName"/>
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email" ref="email"/>
                                <label htmlFor="password1">Password</label>
                                <input type="password" name="password1" placeholder="Password" ref="password1"/>
                                <label htmlFor="password2">Re-enter Password</label>
                                <input type="password" name="password2" placeholder="Password"/>
                                <input className="button gold" type="submit" value="Register"/>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
});

module.exports = Access;

Upvotes: 3

Views: 16655

Answers (3)

Kenny
Kenny

Reputation: 641

Not sure if I'm missing something, but in your form you say onSubmit={this.onSubmit} while your method is called handleSubmit.

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281616

It happens because you access the refs with _this.ref.firstName and not _this.refs.firstName

Also you should not be using string refs any longer. Rather follow the callback approach, as recommended by the react docs

var Access = React.createClass({
    getInitialState: function() {
        return {
            firstName: '',
            lastName: '',
            email: '',
            password1: ''
        }
    },

    handleSubmit: function(e) {
        var _this = this;

        console.log(_this.firstName);
        this.serverRequest = axios
        .post("/api/Users", {
            userFirstName: _this.firstName,
            userLastName: _this.lastName,
            userEmail: _this.email,
            userPassword: _this.password1
        })
        .then(function(response) {
            console.log(response);
        }) .catch(function (error) {
            console.log(error);
        });
    },

    render: function() {
        return(
            <div>
                <section className="access">
                    <div className="row center-xs container">
                        <div className="col-xs-12 col-sm-4 sign-in">
                            <h1>Sign-In</h1>
                            <form action="/" method="get">
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email"/>
                                <label htmlFor="password">Password</label>
                                <input type="password" name="password" placeholder="Password"/>
                                <input className="button pink" type="submit" value="Sign-In"/>
                                <br/>
                                <input type="checkbox" name="RememberMe"/>
                                <label htmlFor="RememberMe">Remember me</label>
                                <span> | <a href="/">Forgot password?</a></span>
                            </form>
                        </div>
                        <div className="col-xs-12 col-sm-4 register">
                            <h1>Register</h1>
                            <form onSubmit={this.onSubmit}>
                                <label htmlFor="firstName">First Name</label>
                                <input type="text" name="firstName" placeholder="First Name" ref={firstName => this.firstName = firstName}/>
                                <label htmlFor="lastName">Last Name</label>
                                <input type="text" name="lastName" placeholder="Last Name" ref={lastName => this.lastName = lastName}/>
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email" ref={email => this.email = email}/>
                                <label htmlFor="password1">Password</label>
                                <input type="password" name="password1" placeholder="Password" ref={password1 => this.password1 = password1}/>
                                <label htmlFor="password2">Re-enter Password</label>
                                <input type="password" name="password2" placeholder="Password"/>
                                <input className="button gold" type="submit" value="Register"/>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
});

Upvotes: 3

TRomesh
TRomesh

Reputation: 4471

This is not the best practice!.React use the ref callback to store a reference to the text input DOM. like ref={(input) => { this.textInput = input; }}. Anyway the issue is that you used ref instead of refs.

The most recommend way is ....

var React = require('react');

    var Access = React.createClass({
        getInitialState: function() {
            return {
                firstName: '',
                lastName: '',
                email: '',
                password1: ''
            }
        },

        handleSubmit: function(e) {
            var _this = this;
            this.serverRequest = axios
            console.log(_this.ref.firstName)
            .post("/api/Users", {
                userFirstName: this.firstName.value,
                userLastName: this.lastName.value,
                userEmail: this.email.value,
                userPassword: this.password1.value
            })
            .then(function(response) {
                console.log(response);
            }) .catch(function (error) {
                console.log(error);
            });
        },

        render: function() {
            return(
                <div>
                    <section className="access">
                        <div className="row center-xs container">
                            <div className="col-xs-12 col-sm-4 sign-in">
                                <h1>Sign-In</h1>
                                <form action="/" method="get">
                                    <label htmlFor="email">Email</label>
                                    <input type="email" name="email" placeholder="Email"/>
                                    <label htmlFor="password">Password</label>
                                    <input type="password" name="password" placeholder="Password"/>
                                    <input className="button pink" type="submit" value="Sign-In"/>
                                    <br/>
                                    <input type="checkbox" name="RememberMe"/>
                                    <label htmlFor="RememberMe">Remember me</label>
                                    <span> | <a href="/">Forgot password?</a></span>
                                </form>
                            </div>
                            <div className="col-xs-12 col-sm-4 register">
                                <h1>Register</h1>
                                <form onSubmit={this.onSubmit}>
                                    <label htmlFor="firstName">First Name</label>
                                    <input type="text" name="firstName" placeholder="First Name" ref={(input) => { this.firstName = input; }}/>
                                    <label htmlFor="lastName">Last Name</label>
                                    <input type="text" name="lastName" placeholder="Last Name" ref={(input) => { this.lastName = input; }}/>
                                    <label htmlFor="email">Email</label>
                                    <input type="email" name="email" placeholder="Email" ref={(input) => { this.email = input; }}/>
                                    <label htmlFor="password1">Password</label>
                                    <input type="password" name="password1" placeholder="Password" ref={(input) => { this.password1 = input; }}/>
                                    <label htmlFor="password2">Re-enter Password</label>
                                    <input type="password" name="password2" placeholder="Password"/>
                                    <input className="button gold" type="submit" value="Register"/>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            );
        }

Upvotes: 2

Related Questions