我刚刚开始学习 react ，我正在使用来自 此处 的 react 样板代码。我无法启动它；我已经设置了 firebase ，需要一些帮助来克服这个错误。我认为我应该在某处使用 bind 方法，但我不太确定。

错误：

register.jsx:19 Uncaught TypeError: Cannot read property 'value' of undefined at UserRegister.onFormSubmit (register.jsx:19) at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:71) at executeDispatch (EventPluginUtils.js:79) at Object.executeDispatchesInOrder (EventPluginUtils.js:102) at executeDispatchesAndRelease (EventPluginHub.js:43) at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54) at Array.forEach () at 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);