ReactJS Redux表单

Question

I have form with couple of input fields which submits values on BLUR action. When user changes something in text field CHANGE is invoked. But only BLUR invokes successful submitting values from text field.

So you have to click outside or use tab to blur out. Or use classic button submit click.

I need to make it work with pressing enter. On enter pressed in input it invokes Touch and then submits form.

Did i miss something ? Or is it default behaviour of form ?

Answer 1

In redux-form, when you connect a component to it you get various props which includes handleSubmit which when called submits your form. For pressing enter and submitting the form on last input you could pass an onKeyPress event callback to your custom Input passed to Field.

I achieved this using the below code.

import React from "react";
import { Field, reduxForm } from "redux-form";


class SimpleForm extends React.Component {

  handleKeyPressEvent = event => {
    console.log("event", event.charCode);
    if (event.charCode === 13) {
      this.props.handleSubmit();
    }
  };

  renderInput = props => (
    <input type={props.type} {...props.input} placeholder={props.placeholder} onKeyPress={this.handleKeyPressEvent} />
  );

  render() {
    const { handleSubmit, pristine, submitting } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <Field
              name="firstName"
              component={this.renderInput}
              type="text"
              placeholder="First Name"
            />
          </div>
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>
            Submit
          </button>
        </div>
      </form>
    );
  }
};

export default reduxForm({
  form: "simple" // a unique identifier for this form
})(SimpleForm);

I hope it helps. Thanks !!