按Enter键而不是提交按钮时，不会触发React Form onSubmit

Question

问题是，当我按下提交按钮时，一切都按原样执行（Ajax请求），但是当我按回车键时，表单会重定向执行。

这是我的FormPage：

import React from 'react';
import jQuery from 'jquery';
$ = jQuery;
import  Header from '../Stateless/Header';
import  Input from '../Stateless/Input';
import  Form from '../Stateless/Form';
import  LinkBox from '../Stateless/LinkBox';

import '../../public/styles/login-register.css';

class LoginPage extends React.Component {
    constructor() {
        super();
        this.state = {username: "", password: ""};
        this.handleChange =  this.handleChange.bind(this);
    }

    componentDidMount() {
        $('.ui.form')
            .form({
                fields: {
                    password: {
                        identifier  : 'password',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : 'Please enter your password'
                            },
                            {
                                type   : 'length[6]',
                                prompt : 'Your password must be at least 6 characters'
                            }
                        ]
                    },
                    username: {
                        identifier  : 'username',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : 'Please enter a username'
                            },
                            {
                                type   : 'length[6]',
                                prompt : 'Your username must be at least 6 characters'
                            }
                        ]
                    }
                }
            })

    }

    handleChange(event) {
        let state = this.state;
        state[event.target.name] = event.target.value;
        this.setState(state);
    }

    handleEnterPress(event) {
        if (event.charCode == 13) {
            this.handleSubmit().bind(this);
        }
    }

    handleSubmit(event) {
        event.preventDefault();

        let data = {
            username: this.state.username,
            password: this.state.password
        };

        $.ajax({
            type: 'POST',
            url: '/api/login',
            data: data
        })
        .done(function(data) {
            console.log(data);
        })
        .fail(function(boomErr) {
            console.log(JSON.parse(boomErr.responseText).message);
        });

    }

    render() {
        return (
            <div className="ui middle aligned center aligned grid">
                <div className="column">
                    <Header text ="Tickr"/>
                    <Form buttonText="Login" onSubmit={this.handleSubmit.bind(this)}>
                        <Input name="username" placeholder="Username" value={this.state.username} onChange={this.handleChange} onSubmit={this.handleSubmit.bind(this)} />
                        <Input name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange} onSubmit={this.handleSubmit.bind(this)}/>
                    </Form>
                    <LinkBox beforeText="New to us? " link="/register" insideText="Register"/>
                </div>
            </div>
        )
    }
}

export default LoginPage;

以下是表单组件：

import React from 'react';

const Form = (props) => {
    return (
        <form onSubmit={props.onSubmit} className="ui large form">
            <div className="ui stacked segment">
                {props.children}
                <button type="submit" className="ui fluid large primary button">{props.buttonText}</button>
            </div>
            <div className="ui error message"></div>
        </form>
    )
};

Form.defaultProps = {
    buttonText: "Enter Text Here",
};
Form.propTypes = {
    buttonText: React.PropTypes.string,
};

export default Form;

以下是输入：

import React from 'react';

const Input = (props) => {
        return (
            <div className="field">
                <input type={props.type} name={props.name} placeholder={props.placeholder} value={props.value} onChange={props.onChange} onSubmit={props.onSubmit}/>
            </div>
        )
};

Input.defaultProps = {
    placeholder: "",
    type: "text"
};
Input.propTypes = {
    name: React.PropTypes.string,
    placeholder: React.PropTypes.string,
    type: React.PropTypes.string
};
export default Input;