Redux Form: есть ли способ захвата каких-либо событий изменения формы? - PullRequest
Новая
       5

Redux Form: есть ли способ захвата каких-либо событий изменения формы?

0 голосов
/ 28 ноября 2018

У меня есть встроенная функция, где я извлекаю информацию из базы данных и заполняю ее в виде избыточности.Однако, я застрял в том, что я хочу сохранить кнопку «сохранить изменения», появляющуюся всякий раз, когда пользователь вносит любые изменения в формы, чтобы эта кнопка могла появляться и перезаписывать свою запись в базе данных.

Например: у меня есть кнопка:

View Links

Теперь, когда происходят какие-либо изменения в форме, это меняется на

Save Changes

Как бы я поступил так?Мне было интересно, могу ли я прикрепить отправку к формам onChange, чтобы она могла добавить состояние changed: true.Иначе, есть ли способ достичь чего-то подобного с помощью приставки-формы?

1 Ответ

0 голосов
/ 29 ноября 2018

Используйте эти логические свойства dirty и pristine, которые придает редукс-форме ваш оформленный компонент-редукс-форму.

Нетронутый имеет значение true, когда значения форм не изменены и dirty - истина, когда значения формы были изменены.

Затем вы можете использовать их и условия ReactJs для отображения других компонентов по своему усмотрению.

Пример; 

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>

для отключения кнопки.когда ничего не было изменено или когда форма отправляется.

Выше приведен пример кода (с незначительными изменениями) из пример базовой редукции и мой полный отредактированный код доступен здесь

...