ReactJs表單提交輸入鍵按

我想提交我的表單，當輸入鍵被按下，但如果我使用onSubmit={() => this.onSearchClick(this)}這是我的功能，我需要運行所有它它把表單放入我不想要的網址發生所有我需要做的就是讓它運行該函數，這將執行一個API調用。ReactJs表單提交輸入鍵按

我的代碼是這樣的

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

調用該

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") 
      }) 
}

來源

2017-08-21 andy wilson

您需要在提交偵聽器中放置'event.preventDefault（）'，並將該事件對象作爲參數傳遞。 'onSubmit = {e => {this.onSearchClick（this）; e.preventDefault（）; }}' – pawel

@pawel我把它放在輸入或表單上？ –

@andywilson'onSubmit'監聽器進入'form'。 – pawel

要停止表單submit事件from re指導你需要撥打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。

來源

2017-08-21 14:20:38 pawel

箭頭函數不需要綁定，因爲它們自動綁定到'this'。參見'最佳解決方案：ES2015箭頭函數'https://medium.com/komenco/react-autobinding-2261a1092849 – Purgatory

@Purgatory你是對的（好吧，不僅他們不需要'bind'，他們不能綁定到另一個上下文）。從代碼中我認爲它被定義爲組件的一個方法，並且在函數名稱後錯過了'='而不是'：'。否則，我不知道該方法所附的「this」是什麼，也可能是全局對象。 – pawel

同意，是的，我認爲'onSearchClick'函數是在'Component'類的上下文中，如果它是安全的'onSubmit = {this.onSearchClick}'，但是上面的解決方案將會在這兩種情況下工作。 – Purgatory

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

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

的event.preventDefault（）函數將阻止與瀏覽器交互形式，讓你進行內部API調用等。

來源

2017-08-21 14:11:14

在這種情況下，'this'不是'事件'對象，並且不會有'preventDefault'方法。 – pawel

ReactJs表單提交輸入鍵按

回答

相關問題