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（）拦截它。

<h1 id="header">Animation</h1>

仅在提交成功时将其设置为true。因此，您需要一个状态变量作为永久源，在我们的例子中，是disableSubmit。

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

1 个答案: