Dynamisch ändern redux-form basierend auf Feldwerte

Question

Ich habe ein Formular, bestehend aus drei Feldern. Wenn Feld 1 den Wert true hat, muss Feld 3 aus dem Formular entfernt werden. Wenn Feld 1 den Wert false hat, muss Feld 3 wieder in das Formular eingefügt werden.

Ich finde nicht eine einfache, saubere Art, dies zu tun.

Eines der Beispiele auf der Website redux-form erläutert, wie ein Formular basierend auf dem Status des Formularbehälters dynamisch erstellt wird. Der Container übergibt das Feldarray an die Formularkomponente als prop, und die Eingabefelder, die das Feldarray steuern, befinden sich innerhalb des Containers. Ich kann diesen Ansatz nicht wirklich verwenden, da Feld 1 innerhalb des Formulars sein muss.

Ich habe versucht, Feld 3 einfach mit CSS zu verstecken, aber die Validierungsregeln sind nicht bewusst, welche Felder ausgeblendet sind oder nicht.

Answer 1

Wenn Sie nicht über die Struktur der Form ändern müssen, und wollen nur das Feld verstecken, vielleicht wird dies für Sie arbeiten:

render() { 
    const {yourField1, yourField3} = this.props; 
    <div> 
    <Input type="text" {...yourField1} /> 
    { !yourField1.value && 
     <Input type="text" {...yourField3} />} 
    </div>