ReactJS Redux表单

Question

我有几个输入字段的表单，它们在BLUR动作上提交值。 当用户更改文本字段中的某些内容时，将调用CHANGE。 但是只有BLUR会调用文本字段中的成功提交值。

因此，您必须单击外部或使用选项卡使其模糊。 或使用经典按钮提交点击。

我需要使其按回车键。 在输入中按下Enter键时，它会调用Touch，然后提交表单。

我错过了什么 ？ 还是表单的默认行为？

Answer 1

在redux-form中，当您将组件连接到它时，您会得到各种道具，其中包括handleSubmit，当被调用时提交您的表单。 要按下Enter键并在最后一次输入时提交表单，您可以将onKeyPress事件回调传递给传递给Field的自定义输入。

我使用以下代码实现了这一点。

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

希望对您有所帮助。 谢谢 ！！