ReactJS Redux-Form答案

【问题标题】：ReactJS Redux-FormReactJS Redux-Form
【发布时间】：2018-01-14 12:22:51
【问题描述】：

我有几个输入字段的表单，可以提交关于 BLUR 操作的值。当用户更改文本字段中的某些内容时，将调用 CHANGE。但只有 BLUR 从文本字段调用成功提交值。

所以你必须点击外部或使用标签来模糊。或者使用经典按钮提交点击。

我需要通过按 Enter 使其工作。在输入中按下输入时，它会调用 Touch，然后提交表单。

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

【问题讨论】：

您可以在表单中添加“onSubmit”功能。并在那里处理您的提交。
添加相关代码部分。 MCVE

标签： javascript forms reactjs redux redux-form

【解决方案1】：

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

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

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

我希望它有所帮助。谢谢！！

【讨论】：