按下回車鍵后如何觸發onSubmit功能？

Question

我有一個組件，當用戶按下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形成github問題。

但無濟於事，我仍然得到一個更新的頁面.....

Answer 1

聽onSubmit的形式，而不是onclick上的按鈕。 默認情況下，按鈕是“提交”類型，因此單擊它或在文本字段內按“輸入”將提交您的表單。

<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 。