使用 Axios 发布响应表单答案

【问题标题】：React form using Axios post使用 Axios 发布响应表单
【发布时间】：2017-09-01 06:15:17
【问题描述】：

我已经在互联网上搜索了几天，似乎找不到与通过 React 提交表单请求和使用 Axios post 将信息输入到我们的 REST API 相关的任何内容。每次我们提交注册表单时，每个值都会出现未定义。这是让 React 与我们的 REST API 通信的最佳方式吗？我们还使用 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;

【问题讨论】：

标签： javascript reactjs jsx axios

【解决方案1】：

这是因为您使用_this.ref.firstName 而不是_this.refs.firstName 访问refs

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

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

【讨论】：

嗨舒巴姆，感谢您的回复。我试过你的建议，但由于某种原因，我们继续收到以下错误，我们所有的值都是 'undefined' { "code": "ER_BAD_NULL_ERROR", "errno": 1048, "sqlState": "23000", “索引”：0 }
我认为您将 console.log(_this.firstName) 声明放在了 handleSubmit 中的错误位置。立即尝试该解决方案。您是否也收到了关于 console.log(_this.firstName) 的响应。另请参阅此stackoverflow.com/questions/17648179/… 以了解 sql 错误
更新了我的代码，当我选择注册时我没有得到任何 console.log。看起来该错误也是因为我们的 userFirstName 值不能为空，并且因为我们的所有列都未定义，所以它会出错。 console.log 似乎没有任何内容。
可能你还需要一个 e.preventDefault() 语句就在 handleSubmit 函数的顶部
UPDATE** 因为在我提交注册表单时允许 userFirstName 为空，所以在数据库中创建了一个新行，但完全为空。所以由于某种原因，我的表单值都没有被发送，但是 post 函数正在工作。

【解决方案2】：

这不是最佳实践！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>
            );
        }

【讨论】：

您好 TRomesh，感谢您的回复。我试过你的建议，但由于某种原因，我们继续收到以下错误，我们所有的值都是 'undefined' { "code": "ER_BAD_NULL_ERROR", "errno": 1048, "sqlState": "23000", “索引”：0 }
@MatthewFarlymn 似乎您正在使用 sql 数据库，通常 sqlState:23000 代表表中的重复键。可能就是这样。

【解决方案3】：

不确定我是否遗漏了什么，但在你的表格中你说 onSubmit={this.onSubmit}，而您的方法称为 handleSubmit。

【讨论】：