Redux 表单没有触发提交功能

Question

我已经设置了一个 redux 表单，但它似乎没有触发 onSubmit 实际的 submitHandle 函数。请看下面的代码

import React, { Component } from "react";
import { connect } from "react-redux";
import { hideTransferLicenseWindow, setProgressBarValue } from "../../redux/actions/LicenseActions";
import { Field, reduxForm } from 'redux-form'

export class LicenseTransfer extends Component {

  componentDidMount() {
    console.log(this.props)
  }

  renderInput = ({ input, customValue, autoFocus }) => {
    return (
      <input
        className="uk-input"
        {...input}
        value={customValue}
        autoFocus={autoFocus}
      />
    )
  }

  onFormSubmit = (values) => {
    console.log('Clicked submit')
  }

  render() {
    const { licenseOperations } = this.props;
    return (
      <div className="app-section transfer-license-window">
        <button
          onClick={() => this.props.hideTransferLicenseWindow()}
          uk-close=""
          className="uk-alert-close"
        ></button>
        <form onSubmit={this.props.handleSubmit(this.onFormSubmit)}>
          <div className="field">
            <label>From:</label>
            <Field
              name="transferLicenseFromEmail"
              component={this.renderInput}
              customValue={this.props.userEmail}
            />
          </div>
          <div className="field">
            <label>To:</label>
            <Field
              name="transferLicenseToEmail"
              component={this.renderInput}
              autoFocus={true}
            />
          </div>
        </form>
      </div>
    );
  }
}

const transferLicenseFormWrapper = reduxForm({
  form: 'transferLicense',
})(LicenseTransfer)

const mapStateToProps = (state) => {
  return {
    userEmail: state.user.user.email,
    licenseOperations: state.licenseOperations,
  };
};

export default connect(mapStateToProps, { hideTransferLicenseWindow, setProgressBarValue })(
  transferLicenseFormWrapper
);

所以它应该在提交表单时记录表单值，但它没有反应也没有给出任何错误/ 我在另一个组件中设置了类似的表单，效果很好。花了很多时间玩找不同的游戏，但这对我来说没有意义。

谢谢

Answer 1

好的，我明白了。对于那些可能有同样问题的人，如果您希望能够通过按 "Enter" 提交，请确保将 submit 按钮放在表单中。如果你只想用鼠标点击按钮提交，将按钮留在表单之外就可以了（不确定是否有其他后果）。

Redux 表单没有触发提交功能

Redux Form is not firing off submit function

reactjs

redux-form