Javascript 按Enter键提交表单

我想在按下enter键时提交我的表单，但是如果我使用onSubmit={=>this.onSearchClickthis}这是我的函数，我需要运行它所做的一切。它将表单放入url，我不想发生。我需要做的一切就是让它运行将执行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();
    });
}

event.preventDefault函数将阻止表单与浏览器交互，并允许您进行内部API调用等

event.preventDefault函数将阻止表单与浏览器交互，并允许您进行内部API调用等。

要停止表单提交事件重定向，您需要调用event.preventDefault方法

您可以在线添加它，如下所示：

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

同样，不会传递该值。我建议使用refs保留对查询输入字段的引用，因此值应为.refs.query.value。

要停止表单提交事件重定向，需要调用event.preventDefault方法

您可以在线添加它，如下所示：

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

---

同样，不会传递该值。我建议使用refs保留对查询输入字段的引用，因此值应为this.refs.query.value。

您需要将event.preventDefault放入提交侦听器中，并将事件对象作为参数传递，例如onSubmit={e=>{this.onSearchClickthis；e.preventDefault；}@pawel我应该把它放在输入或表单上吗？@andywilson onSubmit listener放在表单上。@pawel perfect请回答这个问题，我会选择作为回答。你需要将event.preventDefault放在submit listener中，并将事件对象作为参数传递，例如onSubmit={e=>{this.onSearchClickthis；e.preventDefault；}@pawel我应该把它放在输入或表单上吗？@andywilson onSubmit listener在表单上。@pawel perfect请回答这个问题，我会选择作为回答。在这种情况下，这不是事件对象，不会有preventDefault方法。在这种情况下，这不是事件对象，也不会有preventDefault方法。箭头函数不需要绑定，因为它们会自动绑定到此服务器。请参阅“最佳解决方案：ES2015箭头函数”@Purgaty您是对的，它们不仅不需要绑定，而且不能绑定到其他上下文。从代码中，我认为它被定义为组件的一个方法，但忽略了函数名后面的=而不是：。否则，我不知道该方法所附加的this是什么，也可能是全局对象。同意，是的，我认为onSearchClick函数位于组件类上下文中，如果是这样，则可以安全地执行onSubmit={this.onSearchClick}但是，上面的解决方案在这两种上下文中都可以使用。箭头函数不需要绑定，因为它们会自动绑定到此上下文。请参阅“最佳解决方案：ES2015箭头函数”@Purgaty您是对的，它们不仅不需要绑定，而且不能绑定到其他上下文。从代码中，我认为它被定义为组件的一个方法，但忽略了函数名后面的=而不是：。否则，我不知道该方法所附加的this是什么，也可能是全局对象。同意，是的，我认为onSearchClick函数位于组件类上下文中，在这种情况下，执行onSubmit={this.onSearchClick}是安全的，但是上面的解决方案在这两种上下文中都有效。

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

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

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