Redux Form не запускает функцию отправки - PullRequest
Новая
       7

Redux Form не запускает функцию отправки

0 голосов
/ 26 мая 2020

Я установил сокращенную форму, но, похоже, она не срабатывает при отправке фактической функции 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
);

Таким образом, он должен регистрировать значения формы при отправке формы, но он не реагирует и не выдает никаких ошибок / У меня аналогичная форма настроена в другом компоненте, который отлично работает. Потратил много времени на поиск отличий, но для меня это не имеет смысла.

Спасибо

1 Ответ

0 голосов
/ 26 мая 2020

Хорошо, я разобрался. Тем, у кого может быть такая же проблема, не забудьте разместить кнопку submit внутри формы, если вы хотите иметь возможность отправить, нажав «Enter». Если вы просто хотите отправить только щелчком мыши по кнопке, достаточно оставить кнопку за пределами формы (не уверен, есть ли какие-либо другие последствия).

...