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

Question

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

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

Спасибо.

Answer 1

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

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

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

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

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

Answer 3

там.

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

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

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

B) Просто отмонтировать вашу форму компонент

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

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

Answer 4

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

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

Answer 5

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

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

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: '' 
}); 

Answer 6

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

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

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

Answer 7

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

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

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

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

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