Question

我正在使用Redux Form v.7.1.2，并且当用户点击提交按钮时，我正在提交表单。在分配运行的函数内部，我执行一个动作。如果自上次提交以来至少有一个值已更改，我只希望执行该操作。我怎么能这样做？

这是我目前的代码：

| ID | B  | S  | K  | P  |
|----|----|----|----|----|
|  1 | 28 | 24 | 24 | 28 |
|  7 | 10 | 10 |    |    |

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

import { isDirty } from 'redux-form'

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

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

this.props.isDirty

Answer 3

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

Answer 4

感谢Erik R的建议，我设法弄清楚每当提交表单时如何更新INSERT INTO [dbo].[tbl_Mail_Mapping] (MailID, SenderID, SenderType, RecieverID, RecieverType ) SELECT @MailID, @SenderID, @SenderType, split.a.value('.', 'NVARCHAR(MAX)'), @RecieverType FROM ( SELECT CAST('<M>'+REPLACE(@RecieverID, ',', '</M><M>')+'</M>' AS XML) AS Data ) r CROSS APPLY Data.nodes('/M') split(a) WHERE split.a.value('.', 'NVARCHAR(MAX)') != ''; SELECT * FROM [dbo].[tbl_Mail_Mapping];。然后，redux-form可以将当前值与最后一组initialValues进行比较，以确定表单是否为initialValues。

pristine/dirty

使用Redux表单，如果有任何字段更改，我该如何提交？

4 个答案: