ReactJS Redux 表单

Question

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

因此您必须在外部单击或使用制表符模糊处理。或者使用经典按钮提交点击。

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

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

Answer 1

在 redux-form 中，当你将一个组件连接到它时，你会得到各种道具，其中包括 handleSubmit，它在被调用时会提交你的表单。要按回车键并在最后一次输入时提交表单，您可以将 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);

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

ReactJS Redux 表单

ReactJS Redux-Form

javascript

forms

reactjs

redux

redux-form