javascript - ReactJs Form Submit on Enter Key press -

i want submit form when enter key pressed if use onsubmit={() => this.onsearchclick(this)} function need run put form url dont want happen need make run function api call.

my code this

<form>       <h1>search</h1>       <hr />       <textfield floatinglabeltext="case id" name="caseid" onchange={this.handlechange} />       <br />       <textfield floatinglabeltext="title" name="title" value={this.state.title} onchange={this.handlechange} />       <br />       <textfield floatinglabeltext="forename" name="forename" value={this.state.forename} onchange={this.handlechange} />       <br />       <textfield floatinglabeltext="surname" name="surname" value={this.state.surname} onchange={this.handlechange} />       <br />       <textfield floatinglabeltext="postcode" name="postcode" value={this.state.postcode} onchange={this.handlechangepost} />       <br />       <textfield floatinglabeltext="telephone number" name="telephone" onchange={this.handlechange} />       <br />       <textfield floatinglabeltext="email address" name="email" value={this.state.email} onchange={this.handlechange} />       <br />       {this.state.isloggedin ? <raisedbutton label="search" onclick={() => this.onsearchclick(this)} primary={true} /> : <raisedbutton label="search disabled" primary={true} />}        &nbsp;&nbsp;        {this.state.isloggedin ? <raisedbutton label="new entry" onclick={() => this.gotonew()} primary={true} /> : <raisedbutton label="new entry" primary={true} />} </form>  onsearchclick = (value) => {     this.setstate({         loading: true,         searchquery: value,         showcourtesy: false,     }, function () {         this.dosearch();     }); } 

which calls this

dosearch() {     this.setstate({         loading: true,         showcourtesy: false     }, function () {      });     var search_url = "http://10.0.2.31/testwebapi/api/data?"         + "forename=" + this.state.forename         + "&surname=" + this.state.surname         + "&caseid=" + this.state.caseid         + "&postcode=" + this.state.postcode         + "&telephone=" + this.state.telephone         + "&email=" + this.state.email         + "&title=" + this.state.title      var _this = this;     this.serverrequest =         axios             .get(search_url             )             .then(function (res) {                 _this.state.searchresults = res.data;                 _this.setstate({                     loading: false,                 })                 console.log(res)             })             .catch(function (error) {                 console.log(error);                 window.alert("unauthorized access please contact if believe should be")             }) } 

to stop form submit event redirecting need call event.preventdefault method.

you can add in-line, this:

<form onsubmit={ e => { this.onsearchclick(this); e.preventdefault(); }}></form> 

keep in mind above, original code, passes reference component onsearchclick method, code looks method expects string. outside of scope of question.

you can refactor onsearchclick method accept event first argument:

onsearchclick = ( event, value ) => {    this.setstate({     loading: true,     searchquery: value,     showcourtesy: false,     }, function () {         this.dosearch();     });     event.preventdefault(); }  <form onsubmit={ this.onsearchclick.bind( ) }></form> 

again, value not passed. recommend use refs keep reference query input field, value this.refs.query.value.

wiki