Как очистить некоторые поля в форме - Redux-Form

Я работаю над страницей, на которой есть много входных проверок и логических привязок на ней, и каждая итерация увеличивается размер страницы. Таким образом, я должен найти красивое и масштабируемое решение.

Представьте себе, когда пользователь выбирает значение из раскрывающегося списка как "A", некоторые поля должны быть отключены, некоторые поля должны быть очищены, а некоторые поля инициализированы значениями по умолчанию. Я могу изменить одно связанное поле (не имеет правила проверки, например regexp или length constrait) с некоторым небольшим кодом, например

  this.props.dispatch(change('xForm','xField','xValue' ))

Моя проблема в том, что когда мне нужно очистить несколько полей,

Он всегда блокируется моим методом проверки, и операция очистки не работает (Примечание: я должен быть таким, но не таким)

Я попробовал несколько стратегий, как показано ниже, но поля y, z, w имеют некоторый текст, и это вызвало правило проверки и ошибки hanled. Таким образом, входы имеют старые значения, а не очищенные.

    //Clear    
    this.props.dispatch(change('xForm','yField','' ))
    this.props.dispatch(change('xForm','zField','' ))
    this.props.dispatch(change('xForm','wField','' ))

Каковы наилучшие методы для четких входов или назначить некоторые значения входам в редукционной форме для страниц с очень зависимыми входами.

Я занимаюсь исследованиями в течение 2 дней, но я не нашел оптимального решения. (нормализатор редукта, редукция формы utils и т.д.)

Благодарю.

Ответы

Ответ 1

Ух, какая-то сложная логика. Абсолютно идеальным способом было бы использовать plugin() API для изменения значений в редукторе при изменении значений других полей. Это сложный API, потому что у вас есть полный контроль над тем, чтобы все испортить в редукторе, но у вас есть сложное требование.

Однако отправка трех действий change(), как вы сказали, что вы делаете, также должна работать нормально. Возможно, вы захотите/должны untouch() поля также, если у них есть Required сообщения проверки, которые вы пока не хотите показывать.

Он всегда блокируется моим методом проверки и сбой операции сброса.

Можете ли вы уточнить, что это значит, показать трассировку стека или вывод ошибки консоли?

Ответ 2

Это сработало для меня:

resetAdvancedFilters(){
        const fields = ['my','fields','do','reset','properly']
        for (var i = 0; i < fields.length; i++) {
            this.props.dispatch(change('formName',fields[i],null))
            this.props.dispatch(untouch('formName',fields[i]))
        }
    }

Ответ 3

Используя ниже, он очищает соответствующие несколько полей, а также очищает ошибки, если они есть, для соответствующих полей.

Общая функция для сброса нескольких полей.

import {change, untouch} from 'redux-form';

//reset the respective fields value with the error if any after
resetFields = (formName, fieldsObj) => {
      Object.keys(fieldsObj).forEach(fieldKey => {

          //reset the field value
          this.props.dispatch(change(formName, fieldKey, fieldsObj[fieldKey]));

          //reset the field error
          this.props.dispatch(untouch(formName, fieldKey));

      });
}

Используйте вышеуказанную общую функцию как,

this.resetFields('userDetails', {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
});

Ответ 4

там.

Посмотрите на http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/

Для всей формы мы можем использовать 4 метода:

A) Вы можете использовать API-интерфейс plugin(), чтобы научить редуктор редукционной формы реагировать на действие, отправленное, когда ваше представление будет успешным.

B) Просто отключите компонент формы

C) Вы можете вызвать this.props.resetForm() из вашей формы после того, как ваше представление будет успешным.

D) Вы можете отправить сброс() из любого подключенного компонента

Ответ 5

Попробуйте использовать функцию отправки в метаобъекте со следующей полезной нагрузкой:

meta.dispatch({
  type: '@@redux-form/CHANGE',
  payload: null,
  meta: { ...meta, field: name },
})

Это должно сделать трюк для любого поля, которое вы хотите.

Ответ 6

Я нашел лучший способ для этого,

Мы можем использовать инициализацию действия создателя РФ.

let resetFields = {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
}

this.props.initialize(resetFields, true); //keepDirty = true;

Если параметр keepDirty имеет значение true, значения последних грязных полей будут сохранены во избежание перезаписывания пользовательских прав.

Ответ 7

очистить несколько полей

import {change} from 'redux-form';

const fields = {name: '', address: ''};
const formName = 'myform';

const resetForm = (fields, form) => {
    Object.keys(fields).forEach(field => dispatch(change(form, field, fields[field])));
}

resetForm(fields,formName);

Ответ 8

Если мы говорим о вводе полей в форму, а затем об удалении перед отправкой, это лучшее решение. Поместите это в свой componentDidMount() с полями, которые вы хотите очистить.

 this.props.initialize({
    firstName: null,
    lastName: null,
    bankRoutingNum: null,
    newBankType: null
  });