Question

我有一个内置的功能，可以从数据库检索信息并将其填充为redux形式。但是，我的棘手问题是我想保存一个“保存更改”按钮，只要用户对表单进行任何更改，该按钮就可以出现并覆盖他们在数据库中的输入。

例如：我有一个按钮：

View Links

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

Save Changes

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

Answer 1

使用这些布尔属性dirty和pristine，即redux-form赋予您装饰后的redux-form组件。

当表单值不变时，

原始为true，而对表单值进行更改时，脏为true。

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

示例；

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

Redux表单：是否可以捕获任何表单更改事件？

1 个答案: