Javascript 使用Axios post对表单进行反应_Javascript_Reactjs_Jsx_Axios

Javascript 使用Axios post对表单进行反应

javascript reactjs

Javascript 使用Axios post对表单进行反应,javascript,reactjs,jsx,axios,Javascript,Reactjs,Jsx,Axios,我在互联网上搜索了好几天，似乎找不到任何与通过React提交表单请求相关的内容，也找不到任何与使用Axios post将信息输入REST API相关的内容。每次我们提交注册表时，每个值都是未定义的。这是让React与我们的restapi通信的最佳方式吗？此外，我们还使用Postman测试了API，并且知道它正在工作 var React = require('react'); var Access = React.createClass({ getInitialState: functi

我在互联网上搜索了好几天，似乎找不到任何与通过React提交表单请求相关的内容，也找不到任何与使用Axios post将信息输入REST API相关的内容。每次我们提交注册表时，每个值都是未定义的。这是让React与我们的restapi通信的最佳方式吗？此外，我们还使用Postman测试了API，并且知道它正在工作

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;

var React=require（'React'）；
var Access=React.createClass({
getInitialState:函数（）{
返回{
名字：''，
姓氏：“”，
电子邮件：“”，
密码1:“”
}
},
handleSubmit:函数（e）{
var_this=这个；
this.serverRequest=axios
console.log（_this.ref.firstName）
.post（“/api/Users”{
userFirstName:_this.ref.firstName，
userLastName:\u this.ref.lastName，
userEmail:_this.ref.email，
用户密码：\ u this.ref.password1
})
.然后（功能（响应）{
控制台日志（响应）；
}).catch（函数（错误）{
console.log（错误）；
});
},
render:function（）{
返回(
登录
电子邮件
密码


记得我吗
| 
登记
名字
姓
电子邮件
密码
重新输入密码
);
}
});
module.exports=访问；

发生这种情况是因为您使用

\u this.ref.firstName

访问

refs

，而不是

\u this.refs.firstName

此外，不应再使用字符串引用。而是按照react文档的建议，采用回调方法

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>
        );
    }
});

var Access=React.createClass({
getInitialState:函数（）{
返回{
名字：''，
姓氏：“”，
电子邮件：“”，
密码1:“”
}
},
handleSubmit:函数（e）{
var_this=这个；
console.log（_this.firstName）；
this.serverRequest=axios
.post（“/api/Users”{
userFirstName:\u this.firstName，
userLastName:\u this.lastName，
userEmail:\u this.email，
用户密码：\ u this.password1
})
.然后（功能（响应）{
控制台日志（响应）；
}).catch（函数（错误）{
console.log（错误）；
});
},
render:function（）{
返回(
登录
电子邮件
密码


记得我吗
| 
登记
名字
this.firstName=firstName}/>
姓
this.lastName=lastName}/>
电子邮件
this.email=email}/>
密码
this.password1=password1}/>
重新输入密码
);
}
});

这不是最佳做法！。React使用

ref

回调存储对文本输入DOM的引用。比如

ref={（input）=>{this.textInput=input；}}}

。无论如何，问题是您使用了

ref

而不是

refs

最推荐的方法是

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>
            );
        }

var React=require（'React'）；
var Access=React.createClass({
getInitialState:函数（）{
返回{
名字：''，
姓氏：“”，
电子邮件：“”，
密码1:“”
}
},
handleSubmit:函数（e）{
var_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
})
.然后（功能（响应）{
控制台日志（响应）；
}).catch（函数（错误）{
console.log（错误）；
});
},
render:function（）{
返回(