Как отключить кнопку отправки в редукционной форме во второй раз после отправки формы в первый раз?

Question

Я новичок в реагировать на избыточность и хочу отключить кнопку отправки после первой успешной отправки. Кнопка отключена и отлично работает при первой отправке, но во второй раз она не отключается. Есть ли решение для этого? И вот мой код ..

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))
);

У меня есть 3 режима в моей форме с избыточностью, и они "добавить", "редактировать" и "посмотреть" .. Во время режима "добавить", Кнопка отправки не должна быть включена, пока не будет заполнено regionName. Потому что это обязательное поле. Это происходит в первый раз ... и после сброса формы кнопка не отключается, даже если regionName не указано. Пожалуйста, помогите мне разобраться с этим.

Я думаю, что функция отключения кнопки должна быть встроена в componentDidUpdate () вместе с инициализацией ... Как я могу это сделать? Если режим «добавить», то он должен быть отключен = {неверный}, а если «редактировать», он должен быть отключен = {нетронутый} ... Как это сделать sh это?

Answer 1

в случае, если вы используете redux-форму, на самом деле есть взлом. всякий раз, когда отправка формы завершается успешно, она возвращает логическое значение 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.