React Redux Weg der Handhabung aktivieren-deaktivieren von DOM-Elementen

Question

Ich habe ein Formular, wo ich bestimmte DOM-Elemente basierend auf dem Status anderer DOM-Elemente aktivieren/deaktivieren müssen. Für z.B. Ich habe einen Radiobutton, auf dessen Klick ein Drop-Down-Button aktiviert sein sollte.

Jetzt, um dies zu implementieren, sollte ich wieder die Redux Weg der Beseitigung einer Aktion folgen, wenn das Radio angeklickt wird und dann innerhalb der Reducer den Zustand ändern und aktivieren/deaktivieren Sie das Dropdown?

Erleichtert redux-form in irgendeiner Weise diesen Prozess? Was ist die beste Vorgehensweise, um dies in einem Reaktiv-Redux-Setup zu implementieren?

Answer 1

Ich verwende Redux-Form für bedingte Eingaben. Zum Beispiel habe ich ein Kontrollkästchen, das, wenn es aktiviert ist, einen Textbereich anzeigen sollte, um die wahre Eingabe zu erklären. Das sieht wie folgt aus:

 <div className="checkbox"> 
      <label for="trueInput"> 
      <input type="checkbox" {...trueInput} /> 
      Is this input true?</label> 
     </div> 

     <div className={!trueInput.value ? 'conditional-input' : ''}> 
      <label for="trueInputExplanation">Why is this input true?</label> 
      <input className="form-control" {...trueInputExplanation} /> 
     </div> 

Die Klasse .conditional-Eingang Styling hat das Element zu verstecken. Ich könnte mir vorstellen, dass Sie dies auch für Behinderte tun könnten, indem Sie eine Ternärfunktion verwenden, die je nach den Bedingungen, die Sie benötigen, wahr oder falsch zurückgibt.

Answer 2

Redux Form verfolgt alles im Geschäft. (Es ist leicht zu sehen, was mit dem Redux Chrome Dev-Tool passiert.) Angenommen, ich habe ein Master-Kontrollkästchen, dessen Aktivierung es mir ermöglicht, ein Slave-Kontrollkästchen zu aktivieren. Also möchte ich den Master-Status aus dem Formular lesen in Requisiten:

const mapStateToProps = (state) => { 
    const isMasterChecked = state.mySetting.isMasterChecked; 
    const form_mySetting = state.form.mySetting; 
    const form_isMasterChecked = form_mySetting ? form_mySetting.values.isMasterChecked : null; 

return { 
    isMasterChecked, 
    form_isMasterChecked 
} 

};

und dann für die Form haben Sie

const {isMasterChecked, form_isMasterChecked} = props; 

const shouldDisable_slaveCheckbox=() => { 
    if (form_isMasterChecked == null) return isMasterChecked; // the form is not fully built yet, so use "real" store value instead of reading the form via store 
    return form_isMasterChecked; 
}; 

<Field name="isSlaveChecked" component="input" type="checkbox" disabled={shouldDisable_slaveCheckbox() ? "" : "disabled"}/> 

Sparsam verwenden, da dieser Ansatz gesamte Form Neuaufbau führen kann.