Redux 表单未触发提交功能

Question

>我已经设置了一个 redux 表单，但它似乎没有在提交实际的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按钮放在表单内。 如果您只想仅使用鼠标单击按钮提交，则将按钮留在表单之外就足够了(不确定是否有任何其他后果(。