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

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

представьте, когда пользователь выбирает значение из раскрывающегося списка как "A", некоторые поля должны быть отключены, некоторые поля должны быть очищены, а некоторые поля инициализированы значениями по умолчанию. Я могу изменить одно связанное поле (не имеет правила проверки, такого как regexp или lenght 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','' ))

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

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

спасибо.

12
clear reactjs redux redux-form

7 ответов

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

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

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

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

3

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

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]))
        }
    }
10

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

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

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

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

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

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

      });
}

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

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

там.

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

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

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

B) просто размонтировать компонент формы

C) Вы можете назвать это.реквизит.resetForm() из формы после отправки преуспевает.

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

1

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

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);
1

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

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

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

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

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

1

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

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

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

0