Redux Form：有没有办法捕获任何表单更改事件？答案

【问题标题】：Redux Form: is there a way to capture any form change events?Redux Form：有没有办法捕获任何表单更改事件？
【发布时间】：2019-04-30 14:31:26
【问题描述】：

我有一个功能，我从数据库中检索信息并将它们填充到 redux 表单中。但是，我坚持的是，每当用户对表单进行 any 更改时，我想保存一个“保存更改”按钮，以便该按钮可以出现并覆盖他们在数据库中的条目。

例如：我有一个按钮：

View Links

现在，当表单发生任何更改时，它会更改为

Save Changes

我将如何去做这样的事情？我想知道是否可以将调度附加到表单的onChange，以便它可以添加changed: true 状态。否则，有没有办法用 redux-form 实现这样的目标？

【问题讨论】：

我只是对这个问题感到好奇，这就是我问这个问题的原因。只需使用 redux-form 更改数据库的信息，对吗？如果是这样！你有 REST API 吗？如果你有 GET 方法和 POST 或 PUT 方法是可能的。
@DushanRandika 这是正确的，但这将是我知道如何处理的下一步。请查看我的编辑以获取更好的示例！
当然！这将是一个很好的实施。使用 onChange 事件并保持状态来检查字段是否已更改是一个不错的组合。但问题是，如果每次出现 Save Changes 时你都在做这样的事情，这意味着有这么多的 db 调用，对吧？
@DushanRandika 不一定！数据库调用将仅在用户单击“保存更改”时进行。否则将不会保存更改。再次感谢您！

标签： reactjs redux redux-form

【解决方案1】：

使用这些布尔属性 dirty 和 pristine redux-form 为您提供装饰的 redux-form 组件。

Pristine 在表单值未更改时为真，dirty 在表单值已更改时为真。

然后您可以使用它们和 ReactJs if-conditions 来显示您认为合适的其他组件。

示例；

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

const SimpleForm = props => {
  const { handleSubmit, pristine, dirty, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        {dirty &&
          <button type="button" disabled={pristine || submitting} onClick={reset}>
            Save Changes
        </button> 
        }
        {pristine &&
          <button type="button" disabled={submitting} onClick={reset}>
            View List
        </button>
        }
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);

您可以看到我使用{dirty && component_to_render} 仅在表单收到任何更改并使用时才呈现该组件

<button type="button" disabled={pristine || submitting}> Submit </button>

在未更改任何内容或提交表单时禁用按钮。

以上是来自basic redux-form example 的代码示例（稍作修改），我的完整编辑代码可在here 获得

【讨论】：