Question

我对学习react相当陌生，我正在使用here中的react样板代码。我无法启动它;我已设置firebase，需要一些帮助才能解决此错误。我相信我应该在某处使用bind方法，但我不太确定。

错误：

register.jsx：19 Uncaught TypeError：无法读取未定义的属性“value” 在UserRegister.onFormSubmit（register.jsx：19） at Object.ReactErrorUtils.invokeGuardedCallback（ReactErrorUtils.js：71）在executeDispatch（EventPluginUtils.js：79） at Object.executeDispatchesInOrder（EventPluginUtils.js：102）在executeDispatchesAndRelease（EventPluginHub.js：43） at executeDispatchesAndReleaseTopLevel（EventPluginHub.js：54）在Array.forEach（）在forEachAccumulated（forEachAccumulated.js：23） at Object.processEventQueue（EventPluginHub.js：259） at runEventQueueInBatch（ReactEventEmitterMixin.js：18）

代码：

import React, { Component } from 'react';
import { browserHistory } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { registerUser } from '../../actions/firebase_actions';

class UserRegister extends Component {
    constructor(props) {
        super(props);
        this.onFormSubmit = this.onFormSubmit.bind(this);
        this.state = {
            message: '',
        };
    }

    onFormSubmit(event) {
        event.preventDefault();

        const email = this.email.value;
        const password = this.password.value;
        this.registerUser({ email, password }).then((data) => {
            if (data.payload.errorCode) {
                this.setState({ message: data.payload.errorMessage })
              ;
            } else {
                browserHistory.push('/profile');
            }
        }
    );
    }

    render() {
        return (
            <div className="col-md-4">
                <form id="frmRegister" role="form" onSubmit={this.onFormSubmit}>
                    <p>{this.state.message}</p>
                    <h2>Register</h2>
                    <div className="form-group">
                        <label htmlFor="txtRegEmail">Email address</label>
                        <input
                          type="email" className="form-control" ref="email" id="txtEmail" placeholder="Enter email"
                          name="email"
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="txtRegPass">Password</label>
                        <input
                          type="password" className="form-control" ref="password" id="txtPass" placeholder="Password"
                          name="password"
                        />
                    </div>
                    <button type="submit" className="btn btn-default">Register</button>
                    <br /> <br />

                    <a
                      href="#" className="btn btn-block btn-social btn-facebook" onClick={() => {
                          this.loginWithProvider('facebook');
                      }} data-provider="facebook"
                    >Facebook</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-twitter" onClick={() => {
                          this.loginWithProvider('twitter');
                      }} data-provider="twitter"
                    >Twitter</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-google" onClick={() => {
                          this.loginWithProvider('google');
                      }} data-provider="twitter"
                    >Google</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-github" onClick={() => {
                          this.loginWithProvider('github');
                      }} data-provider="twitter"
                    >Github</a>

                </form>
            </div>
        );
    }

}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        registerUser,
    }, dispatch);
}

function mapStateToProps(state) {
    return { currentUser: state.currentUser };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserRegister);

Answer 1

尝试使用state来保存文本输入值

import React, { Component } from 'react';
import { browserHistory } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { registerUser } from '../../actions/firebase_actions';

class UserRegister extends Component {
    constructor(props) {
        super(props);
        this.onFormSubmit = this.onFormSubmit.bind(this);
        this.state = {
            message: '',
            email: '',     // Add
            password: '',  // Add
        };
    }

    onFormSubmit(event) {
        event.preventDefault();

        const email = this.state.email;         // Change
        const password = this.state.password;   // Change
        registerUser({ email, password }).then((data) => {  // change
            if (data.payload.errorCode) {
                this.setState({ message: data.payload.errorMessage })
              ;
            } else {
                browserHistory.push('/profile');
            }
        }
    );
    }

    render() {
        return (
            <div className="col-md-4">
                <form id="frmRegister" role="form" onSubmit={this.onFormSubmit}>
                    <p>{this.state.message}</p>
                    <h2>Register</h2>
                    <div className="form-group">
                        <label htmlFor="txtRegEmail">Email address</label>
                        <input
                          type="email" className="form-control" ref="email" id="txtEmail" placeholder="Enter email"
                          name="email" value={this.state.email} onChange={e => this.setState({email: e.target.value})}    // Change
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="txtRegPass">Password</label>
                        <input
                          type="password" className="form-control" ref="password" id="txtPass" placeholder="Password"
                          name="password" value={this.state.password} onChange={e => this.setState({password: e.target.value})} // Change
                        />
                    </div>
                    <button type="submit" className="btn btn-default">Register</button>
                    <br /> <br />

                    <a
                      href="#" className="btn btn-block btn-social btn-facebook" onClick={() => {
                          this.loginWithProvider('facebook');
                      }} data-provider="facebook"
                    >Facebook</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-twitter" onClick={() => {
                          this.loginWithProvider('twitter');
                      }} data-provider="twitter"
                    >Twitter</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-google" onClick={() => {
                          this.loginWithProvider('google');
                      }} data-provider="twitter"
                    >Google</a>
                    <a
                      href="#" className="btn btn-block btn-social btn-github" onClick={() => {
                          this.loginWithProvider('github');
                      }} data-provider="twitter"
                    >Github</a>

                </form>
            </div>
        );
    }

}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        registerUser,
    }, dispatch);
}

function mapStateToProps(state) {
    return { currentUser: state.currentUser };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserRegister);

Answer 2

这是不好的做法。您应该只通过上面提到的onChange={e => this.setState({email: e.target.value})}注入值。

我建议你从一个干净的样板开始（create-react-app是最好的开始）并设置第一个状态，例如用户名/电子邮件。在尝试将其发送到firebase之前，请将其登录到控制台。这样，您始终确保您的应用程序本身工作正常。否则，总是很难分辨问题的真正来源。

我写信告诉你如何处理这个小代码片段，你可以在这里找到：

单击右上角可在新窗口中打开应用程序（编辑器浏览器右上角的符号）并打开控制台。当您输入电子邮件时，它会登录提交。我建议你复制一下并添加你要记录的所有值（密码等），然后首先将这些值记录到控制台中。如果这样做，请添加您的firebase auth并尝试添加数据库的推送功能。

问候！

未捕获的TypeError：无法读取未定义的React app的属性“value”

2 个答案: