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表单未触发提交功能

1 个答案: