jquery - React Form onSubmit doesn't get triggered when pressing enter instead of the submit button -

the problem when press submit button executes should(ajax request ), when press enter form gets execute redirect.

here formpage:

import react 'react'; import jquery 'jquery'; $ = jquery; import  header '../stateless/header'; import  input '../stateless/input'; import  form '../stateless/form'; import  linkbox '../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 password'                             },                             {                                 type   : 'length[6]',                                 prompt : 'your password must @ least 6 characters'                             }                         ]                     },                     username: {                         identifier  : 'username',                         rules: [                             {                                 type   : 'empty',                                 prompt : 'please enter username'                             },                             {                                 type   : 'length[6]',                                 prompt : 'your username must @ 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 us? " link="/register" insidetext="register"/>                 </div>             </div>         )     } }  export default loginpage; 

here form component:

import react '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; 

here inputs:

import react '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;