使用 Redux 表单，如何仅在任何字段发生更改时才提交？

Question

我正在使用 Redux Form v.7.1.2，目前正在用户单击提交按钮时提交表单。在分配给运行的函数内部，我执行了一个操作。我只希望在自上次提交后至少有一个值发生更改时执行该操作 。我该怎么做？

这是我目前的代码：

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 component={this.renderField} key="keyword" name="keyword" /> <Field component={this.renderField} key="type" name="type" /> </form> ); } } export default reduxForm({ validate, form: 'SearchFiltersForm', })(connect(mapStateToProps, null)(SearchFilters));

Answer 1

我认为将之前提交的值存储在 state 中可以解决问题：

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
          component={this.renderField}
          key="keyword"
          name="keyword"
        />
        <Field
          component={this.renderField}
          key="type"
          name="type"
        />
      </form>
    );
  }
}

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

Answer 2

此外，您可以使用提交的值更新 initialValues，这样 pristine/dirty 就会通知您。

Answer 3

感谢 Erik R 的建议，我设法弄清楚如何在提交表单时更新 initialValues。然后 redux-form 可以将当前值与最后一组 initialValues 进行比较，以确定表单是否为 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 comparing 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 comparing 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 compare 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
          component={this.renderField}
          key="keyword"
          name="keyword"
        />
        <Field
          component={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));

Answer 4

import { isDirty } from 'redux-form'

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

然后在 render 方法中您将可以访问

this.props.isDirty

使用 Redux 表单，如何仅在任何字段发生更改时才提交？

Using Redux Form, how do I only submit if any fields have changed?

javascript

reactjs

redux-form

react-redux