So löschen Sie einige Felder im Formular - Redux-Formular

Question

Ich arbeite an einer Seite, die viele Eingabeüberprüfungen und logische Bindungen hat und bei jeder Iteration die Seitengröße erhöht. Also muss ich eine schöne und skalierbare Lösung finden.

Stellen Sie sich vor, wenn Benutzer einen Wert aus der Dropdown-Liste als 'A' auswählen, müssen einige Felder deaktiviert werden, einige Felder müssen gelöscht und einige Felder mit Standardwerten initialisiert werden. Ich kann ein Bezugsfeld ändern Wert mit etwas wenig Code wie

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

Mein Problem (nicht Gültigkeitsregel wie regexp oder Länge constrait haben) ist, dass, wenn ich brauche, um mehrere Felder zu löschen,

Es ist immer blockiert durch meine Validierungsmethode und Löschen Operation ist fehlgeschlagen (Hinweis: Ich sollte so sein, aber nicht so)

.

Ich habe einige Strategien wie unten versucht, aber y, z, w Felder haben etwas Text und es löste Validierungsregel und gehandhabte Fehler aus. Daher haben die Eingänge immer noch alte Werte, keine gelöschten.

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

Welche Best Practices sind für das Löschen von Eingaben oder das Zuweisen von Werten zu Eingaben in redux-form für Seiten mit stark abhängigen Eingaben?

Ich habe seit 2 Tagen recherchiert, aber ich konnte keine optimale Lösung finden. (redox normalizer, reduce form utils usw.)

Danke.

Answer 1

Wow, das ist eine komplizierte Logik. Der absolut ideale Weg wäre, den Wert plugin() API zu verwenden, um Werte im Reduzierer zu ändern, wenn sich Ihre anderen Feldwerte ändern. Es ist eine komplizierte API, weil Sie die totale Kontrolle haben, Dinge im Reducer zu vermasseln, aber Sie haben eine komplizierte Anforderung.

Allerdings drei weitere Aktionen wie Sie sagten, Sie tun, sollte auch gut funktionieren. Sie könnten/wollen auch untouch() die Felder haben, wenn sie Required Validierungsnachrichten haben, die Sie noch nicht anzeigen möchten.

Es immer von meiner Validierungsmethode blockiert und Löschen Operation ist fehlgeschlagen.

Können Sie näher erläutern, was das bedeutet, einen Stack-Trace oder einen Konsolenfehler ausgeben?

Answer 2

Das ist für mich gearbeitet:

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

dort.

Blick Lassen Sie uns bei http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/

Für ganze Form können wir vier Methoden verwenden:

A) Sie können das Plugin() API verwenden, um die Redux-Form Minderer zu lehren, auf die Aktion zu reagieren versandt, wenn Ihre die Einreichung ist erfolgreich.

B) aushängen Sie einfach Ihre Form Komponente

C) Sie können auch anrufen this.props.resetForm() aus Ihrem Formular nach Ihrer Vorlage erfolgreich ist.

D) Sie können Reset dispatch() von jeder verbundenen Komponente

Answer 4

klar mehrere Felder

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

die nachstehend unter Verwendung, löscht es die jeweiligen mehreren Feldern und löscht auch die Fehler, falls vorhanden für die jeweilige Felder.

Gemeinsame Funktion zum Zurücksetzen mehrerer Felder.

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

     }); 
} 

Verwenden Sie die oben gemeinsame Funktion als,

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

Answer 6

Versuchen Sie, die Dispatch-Funktion in Meta-Objekt mit folgenden Nutzlast zu verwenden:

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

, die den Trick für jedes Feld tun, sollten Sie wollen.

Answer 7

fand ich einen besseren Weg dafür,

Wir initialize Aktion Schöpfer von RF verwenden können.

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

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

Wenn der keepDirty-Parameter true ist, werden die Werte der derzeit fehlerhaften Felder beibehalten, um zu verhindern, dass Benutzerbearbeitungen überschrieben werden.