第一次提交表单后，如何第二次禁用 redux 表单中的提交按钮?

Question

我是 react-redux 的初学者，我想在第一次成功提交后禁用我的提交按钮。该按钮被禁用，并且在第一次提交时工作正常，但第二次没有被禁用。有解决方案吗？ 以下是我的代码。

import React, { Component } from "react";
import {
Field,
reduxForm,
getFormValues,
formValueSelector,
reset,
formValues,
invalid
} from "redux-form";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { regionActions } from "./ducks/index";
import { Row, Col, ButtonToolbar, Button } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { InputField } from "./../../components/controls/Fields";
import "./regionManagement.scss";
//import { handleInputChange } from "react-select/src/utils";
const validate = values => {
const errors = {};
// const fieldVal = ["regionName", "code", "description"];
const fieldVal = ["regionName"];
fieldVal.forEach(fieldVal => {
if (!values[fieldVal]) {
errors[fieldVal] = "Region Name is Required";
}
});
return errors;
};
class RegionForm extends Component {
constructor(props) {
super(props);
this.state = {
errors: false
};
}
componentDidUpdate(prevProps) {
if (this.props.mode && this.props.mode != prevProps.mode) {
//when changing the mode from edit to add
if (this.props.mode == "add") {
this.props.initialize({
selectedRegion: null,
regionName: null,
code: null,
description: null
});
}
}
if (
this.props.selectedRegion &&
this.props.selectedRegion != prevProps.selectedRegion
) {
this.props.initialize({
selectedRegion: this.props.selectedRegion && this.props.selectedRegion,
regionName: this.props.selectedRegion && this.props.selectedRegion.name,
code: this.props.selectedRegion && this.props.selectedRegion.code,
description:
this.props.selectedRegion && this.props.selectedRegion.description
});
this.setState({ selectedRegion: this.props.selectedRegion });
}
if (this.props.region.clearFields == true) {
this.props.reset(); // reset() comes as a prop with redux-form
//this.props.invalid();
}
}
render() {
const {
handleSubmit,
onSubmit,
invalid,
submitting,
pristine
} = this.props;
return (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<h5>{this.props.title}</h5>
</div>
<div className="form-group">
<label>Name</label>
<span style={{ color: "red" }}> *</span>
</div>
<div>
<Field
type="text"
className="form-control mb-2"
name="regionName"
component={InputField}
disabled={this.props.fieldDisabled}
/>
</div>
{/* {this.props.mode == "add" ? ( */}
<>
<div className="form-group">
<label>Code</label>
</div>
<div>
<Field
type="text"
className="form-control mb-2"
name="code"
component={InputField}
disabled={this.props.fieldDisabled}
/>
</div>
<div className="form-group">
<label>Description</label>
</div>
<div>
<Field
type="text"
className="form-control mb-2"
name="description"
component={InputField}
disabled={this.props.fieldDisabled}
/>
</div>
</>
<ButtonToolbar>
<Button
as="input"
type="submit"
name="formBtn"
value={this.props.button}
className="button"
disabled={this.props.mode == "edit" ? pristine : invalid}
/>
</ButtonToolbar>
</form>
</>
);
}
}
function mapStateToProps(state) {
return {
region: state.Regions,
fieldValues: getFormValues("region_form")(state)
};
}
export default withRouter(
reduxForm({
form: "region_form",
validate
// enableReinitialize: true
})(connect(mapStateToProps, regionActions)(RegionForm))
);

我的 redux 表单中有 3 种模式，它们是"添加"、"编辑"和"查看"。在"添加"模式下，在填写 regionName 之前不应启用提交按钮。因为它是必填字段。这是第一次发生...重置表单后，即使未给出区域名称，也不会禁用该按钮。 请帮我解决这个问题。

我认为按钮禁用功能应该嵌入到组件DidUpdate((以及初始化...我该怎么做？如果模式是"添加"，那么它应该是禁用={无效}，如果"编辑"，它应该是禁用={原始}...如何做到这一点？

Answer 1

如果你使用redux-form，实际上有一个黑客。 每当表单提交成功时，它都会返回一个布尔提交成功为真。 你可以从componentWillReceiveProps((中截获它。

constructor(props) {
super(props);
this.state = {
errors: false,
disableSubmit: false,
};
}
componentWillReceiveProps(nextProps) {
if (nextProps && nextProps.submitSucceeded) {
this.setState(prevState => ({
...prevState,
disableSubmit: true,
}
} 

每当提交成功时，它只会设置为 true 一次。 因此，您需要一个状态变量作为持久源，在我们的例子中为 disableSubmit。