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 之前不应启用提交按钮。因为这是一个必填字段。这是第一次发生......并且在表单被重置后，即使没有给出 regionName，按钮也不会被禁用。请帮我解决这个问题。

我认为按钮禁用功能应该与初始化一起嵌入到 componentDidUpdate()... 我该怎么做？如果模式是“添加”，那么它应该是 disable={invalid}，如果是“编辑”，它应该是 disable={pristine}... 如何做到这一点？

Answer 1

如果您使用的是 redux-form，实际上会有一个 hack。每当表单提交成功时，它都会返回一个布尔值 submitSucceeded 作为 true。你可以从 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。