javascript - Using Redux Form, how do I only submit if any fields have changed? - Stack Overflow

admin管理员组

文章数量:1335861

I'm using Redux Form v.7.1.2 and am currently submitting the form when the user clicks the submit button. Inside of the function it is assigned to run, I perform an action. I only want that action to be performed if at least one value has been changed since the last submit. How can I do that?

Here is my code currently:

import { Field, reduxForm } from 'redux-form';

class SearchFilters extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(values) {
    // Only perform this action if at least one value was changed since the last submit
    this.props.doSomething(values);
  }

  renderField(field) {
    return (
      <div className="search-parameter">
        <input type="text" {...field.input} />
      </div>
    );
  }

  render() {
    const { handleSubmit, pristine, submitting, invalid } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)} >
        <Field
          ponent={this.renderField}
          key="keyword"
          name="keyword"
        />
        <Field
          ponent={this.renderField}
          key="type"
          name="type"
        />
      </form>
    );
  }
}

export default reduxForm({
  validate,
  form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));

I'm using Redux Form v.7.1.2 and am currently submitting the form when the user clicks the submit button. Inside of the function it is assigned to run, I perform an action. I only want that action to be performed if at least one value has been changed since the last submit. How can I do that?

Here is my code currently:

import { Field, reduxForm } from 'redux-form';

class SearchFilters extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(values) {
    // Only perform this action if at least one value was changed since the last submit
    this.props.doSomething(values);
  }

  renderField(field) {
    return (
      <div className="search-parameter">
        <input type="text" {...field.input} />
      </div>
    );
  }

  render() {
    const { handleSubmit, pristine, submitting, invalid } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)} >
        <Field
          ponent={this.renderField}
          key="keyword"
          name="keyword"
        />
        <Field
          ponent={this.renderField}
          key="type"
          name="type"
        />
      </form>
    );
  }
}

export default reduxForm({
  validate,
  form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));

• javascript
• reactjs
• react-redux
• redux-form

Share Improve this question Follow asked Nov 2, 2017 at 3:08 zeckdudezeckdude 16.2k4444 gold badges147147 silver badges194194 bronze badges 2

• What is the type of values in onSubmit(values) ? – Dane Commented Nov 2, 2017 at 3:39
• values is an object with each field/value as a key/value pair. So for my example, it would be { keyword: 'abc', type: 'def' }. – zeckdude Commented Nov 2, 2017 at 14:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

import { isDirty } from 'redux-form'

const mapStateToProps = state => ({
  ...
  isDirty: isDirty('myForm')(state),
})

and then inside render method you will have access to

this.props.isDirty

I think storing the previously submitted values in the state could solve the issue:

import { Field, reduxForm } from 'redux-form';

class SearchFilters extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: ''
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(values) {
    // check if states are same, if not, setState and doSomething
    const valueString = JSON.stringify(values);
    if ( this.state.values !== valueString ) {
      this.setState({ values: valueString });
      this.props.doSomething(values);
    }
  }

  renderField(field) {
    return (
      <div className="search-parameter">
        <input type="text" {...field.input} />
      </div>
    );
  }

  render() {
    const { handleSubmit, pristine, submitting, invalid } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)} >
        <Field
          ponent={this.renderField}
          key="keyword"
          name="keyword"
        />
        <Field
          ponent={this.renderField}
          key="type"
          name="type"
        />
      </form>
    );
  }
}

export default reduxForm({
  validate,
  form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));

Also, you could update your initialValues with the submitted values, and that way pristine/dirty will let you know.

Thanks to Erik R's suggestion, I managed to figure out how to update the initialValues whenever the form is submitted. Then redux-form can pare the current values to the last set initialValues to determine if the form is pristine/dirty.

import { Field, reduxForm } from 'redux-form';

class SearchFilters extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(values) {
    // Check if the form values have changed since the last submit
    // The dirty boolean (signifies if the form has changed from its initial values) is established by redux-form by paring the currently entered values to the initial form values
    // After we identify the form as having been changed, we will send the new form values to replace the original initial form values so redux-form is always paring the current form values against the last submitted form values
    if (this.props.dirty) {
      // Set the initial values for the form on the redux store (This is used by redux form to pare the current values to the initial values so we can determine if there are new values since the last submit)
      this.props.initialize(values);
    }
  }

  renderField(field) {
    return (
      <div className="search-parameter">
        <input type="text" {...field.input} />
      </div>
    );
  }

  render() {
    const { handleSubmit, submitting, invalid } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)} >
        <Field
          ponent={this.renderField}
          key="keyword"
          name="keyword"
        />
        <Field
          ponent={this.renderField}
          key="type"
          name="type"
        />
        <button
          type="submit"
          disabled={submitting || pristine || invalid}
        >
          Search
        </button>
      </form>
    );
  }
}

export default reduxForm({
  validate,
  form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));

本文标签： javascriptUsing Redux Formhow do I only submit if any fields have changedStack Overflow