Question

我有一个组件，应该在用户按下Enter或单击按钮时提交。最重要的是，用户将期望能够使用Enter提交此表单，并且发送按钮实际上仅适用于他们注意到表单存在并决定按下按钮的情况。

我的问题是我有所有的表单设置，并且我的提交处理程序正常工作，但是我似乎根本无法捕获Enter键！

首先我有这样的提交功能：

  onSubmit(e) {
    e.preventDefault();
    this.state.socket.emit('message', this.state.message);
    console.log('emitted');
    this.setState(
      {
        message: '',
      },
      () => {
        // e.target.value = '';
        console.log('state should be cleared.');
      },
    );
  }

和我这样的表格：

<Form>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton" onClick={this.onSubmit}>
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

我确实尝试通过此处找到的解决方案来完成此任务：react-redux forms github issue.

但无济于事，我仍然得到刷新的页面.....

Answer 1

在表单上收听onSubmit，而不是按钮上的onclick。默认情况下，按钮的类型为“提交”，因此在文本字段中单击按钮或按Enter即可提交表单。

<Form onSubmit={this.onSubmit}>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton">
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

Answer 2

对此进行重构：

<Form>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton" onClick={this.onSubmit}>
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

对此：

发送

那我从哪里得到handleSubmit？好吧，如果您在此处进行console.log(this.props);：

render() {
  console.log(this.props);
  return (
    <Form onSubmit={this.props.handleSubmit(this.onSubmit)}>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <button className="chatBoxButton">Send</button>
     </div>
  </FormGroup>
</Form>
  )
}

您会发现Redux Form的props对象内部有大量属性，特别是一个称为handleSubmit的属性，在您提交表单时，我们应该调用此函数及其由Redux Form提供。

好吧，为什么不只onSubmit={this.onSubmit}呢？简短的答案是因为现在您正在使用Redux Form。

调用onSubmit={this.props.handleSubmit(this.onSubmit)}的新过程将改变onSubmit的调用方式。

所以代替：

onSubmit(event) {
  event.preventDefault();
}

您现在可以这样做：

onSubmit(formValues) {

}

您看到您不再需要处理event对象，而是将使用表格中的所有值来调用该对象。因此，handleSubmit在幕后处理event.preventDefault()，而留下我们的onSubmit()回调函数来与formValues通话。

按下回车键时如何触发onSubmit函数？

2 个答案: