按下回车键后如何触发onSubmit功能？

Question

I have a component that is supposed to submit when the user presses enter or clicks a button. The big thing is that the user is going to expect to be able to use Enter to submit this form, and the send button is really for only when they notice it's there, and decide to press the button.

My issue is that I have the form setup and all, and I have my submit handler working properly, but I can't seem to capture the enter key for this at all!

first I have my submit function like this:

  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.');
      },
    );
  }

and my form like this:

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

I did try to get this done with a solution found here: react-redux forms github issue.

but to no avail, I still get an refreshed page.....

Answer 1

Listen to onSubmit on the form rather than onclick on the button. Buttons are type "submit" by default, so clicking it or pressing 'Enter' inside the text field will submit your form.

<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

Refactor this:

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

into this:

Send

So where did I get handleSubmit from? Well, if you do a console.log(this.props); here:

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

You will find there are tremendous number of properties inside that props object by Redux Form, one in particular, is called handleSubmit which is a function we are supposed to call anytime that your form gets submitted and its provided by Redux Form.

Okay, but why not just onSubmit={this.onSubmit} ? Short answer is because now you are using Redux Form.

This new process of calling onSubmit={this.props.handleSubmit(this.onSubmit)} will change how onSubmit gets called.

So instead of:

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

You can now do:

onSubmit(formValues) {

}

You see you no longer have to deal with the event object, instead, it will be called with all the values out of your form. So handleSubmit handles the event.preventDefault() behind the curtain, leaving our onSubmit() callback to get called with the formValues .