ReactJsフォームEnterキーを押して送信

Question

Enterキーを押したときにフォームを送信したいのですが、私の機能であるonSubmit={() => this.onSearchClick(this)}を使用すると、フォームをすべて実行する必要があります。私がする必要があるのは、API呼び出しを行う関数を実行させることだけです。

私のコードは、ブラウザとの相互作用からフォームを防ぎ、あなたが内部行うことができます。この

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 To Access This Please Contact IT If You Believe You Should Be") 
      }) 
} 

Answer 1

submitイベントを再開するにはevent.preventDefaultメソッドに電話する必要があります。

あなたはこのように、インラインそれを追加することができます。

<form onSubmit={ e => { this.onSearchClick(this); e.preventDefault(); }}></form> 

onSearchClickメソッドへのコンポーネントへの参照を渡しますが、あなたのコードからそれが見え、ちょうどあなたの元のコードのように、上記の点に注意してくださいメソッドのように文字列が必要です。しかし、これはこの質問の範囲外です。

また、最初の引数としてイベントを受け入れるようにonSearchClickメソッドをリファクタリングすることができます

onSearchClick = (event, value) => { 
    this.setState({ 
    loading: true, 
    searchQuery: value, 
    showCourtesy: false, 
    }, function() { 
     this.doSearch(); 
    }); 
    event.preventDefault(); 
} 

<form onSubmit={ this.onSearchClick.bind(this) }></form> 

は再び、 valueが渡されることはありません。 refsを使用してクエリ入力フィールドへの参照を保持することをお勧めします。値は this.refs.query.valueです。

Answer 2

<form onSubmit={() => this.onSearchClick(this)}> .... 

onSearchClick(event) { 
    event.preventDefault() 
    /* do stuff here */ 
} 

event.preventDefault（）関数を呼び出し、この

<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(); 
    }); 
} 

ですAPI呼び出しなど