Question

我想在按下回车键时提交我的表单但如果我使用onSubmit={() => this.onSearchClick(this)}这是我的功能我需要运行所有它是否将表单放入我不想发生的网址我需要做的就是让它运行那个将执行api调用的函数。

我的代码就是这个

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

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（）函数将阻止表单与浏览器交互，并允许您进行内部API调用等。

ReactJs表单提交在Enter键按下

2 个答案: