Question

我已经在互联网上搜索了好几天，似乎无法找到任何与通过React提交表单请求相关的内容，并使用Axios帖子将信息输入到我们的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;

Answer 1

不确定我是否遗漏了某些东西，但你说的是你的形式您的方法被称为onSubmit={this.onSubmit}时会handleSubmit。

Answer 2

之所以发生这种情况，是因为您使用refs访问_this.ref.firstName而非_this.refs.firstName

此外，您不应再使用字符串引用。而是按照反应文档

的建议，遵循回调方法

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

Answer 3

这不是最好的做法！.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>
            );
        }

使用Axios帖子反应表单

3 个答案: