javascript - React form using Axios post -
i've been searching internet days , cannot seem find related submitting form request through react , using axios post input information our rest api. every time submit our register form every value comes undefined. best way have react communicate our rest api? have tested api using postman , 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;
this not best practice!.react use ref callback store reference text input dom. ref={(input) => { this.textinput = input; }}. anyway issue used ref instead of refs.
the recommend way ....
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> ); }
Comments
Post a Comment