Der Status wird innerhalb der Eingabekomponente verwaltet. Ich habe diese Status:

• Wert: Geben Sie den Wert des Elements ein.
• isInputTouched: Bestimmt, ob der Benutzer die Eingabe berührt/fokussiert hat, um zu bestimmen, ob gegebenenfalls eine Validierungsfehlermeldung angezeigt werden soll.

Ich kombiniere und wende einige Funktionen (z. B. die an die Eingabekomponente übergebene Validierungsfunktion) auf diese beiden Zustände an, um andere Variablenwerte zu erstellen und Informationen über die Eingabe und ihre Gültigkeit zu sammeln, z. B. ob der Wert gültig ist (isValid), ob eine Nachrichtenüberprüfung vorliegt (Nachricht), ob die Eingabe gültig ist (isInputValid = isValid || !isInputTouched), um zu entscheiden, ob die Überprüfungsnachricht angezeigt werden soll.

Diese Zustände und Werte werden in einem benutzerdefinierten Hook verwaltet, den ich erstellt habe, useInput, wie folgt:

hooks/use-state.js

import { useState, useCallback } from 'react'; Funktion useInput(validityFn) { const [value, setValue] = useState(''); const [isInputTouched, setIsInputTouched] = useState(false); const [isValid, message] = typeof validityFn === 'function' ? validityFn(value) : [true, null]; const isInputValid = isValid ||. const inputChangeHandler = useCallback(event => { setValue(event.target.value); if(!isInputTouched) { setIsInputTouched(true); } }, [isInputTouched]); const inputBlurHandler = useCallback(() => { setIsInputTouched(true); }, []); const reset = useCallback(() => { setValue(''); setIsInputTouched(false); }, []); zurückkehren { Wert, ist gültig, isInputValid, Nachricht, inputChangeHandler, inputBlurHandler, zurücksetzen }; } Standardwert exportieren useInput; 

Ich verwende derzeit diesen benutzerdefinierten Hook in Input.js wie folgt:

components/UI/Input.js

import { useEffect } from 'react'; importiere useInput aus '../../hooks/use-input'; import './Input.scss'; Funktion Input(props) { const { Wert, ist gültig, isInputValid, Nachricht, inputChangeHandler, inputBlurHandler, zurücksetzen } = useInput(props.validity); const { onIsInputValidOrMessageChange, onValidityChange, onReset } = Requisiten; let className = 'form-control'; if(!isInputValid) { className = `${className} form-control--invalid`; } if(props.className) { className = `${className} ${props.className}`; } useEffect(() => { if(onIsInputValidOrMessageChange && typeof onIsInputValidOrMessageChange === 'function') { onIsInputValidOrMessageChange(isInputValid, message); } }, [onIsInputValidOrMessageChange, isInputValid, message]); useEffect(() => { if(onValidityChange && typeof onValidityChange === 'function') { onValidityChange(isValid); } }, [onValidityChange, isValid]); useEffect(() => { if(onReset && typeof onReset === 'function') { onReset(reset); } }, [onReset, zurücksetzen]); zurückkehren (  ); } Standardeingabe exportieren; 

In der Eingabekomponente verwende ich direkt den Status isInputValid, um die ungültige CSS-Klasse zur Eingabe hinzuzufügen. Ich übergebe aber auch die Funktionen isInputValid, message und reset an die übergeordnete Komponente darin zu verwenden. Um diese Zustände und Funktionen zu übergeben, verwende ich die in props definierten Funktionen onIsInputValidOrMessageChange, onValidityChange (Props-Drilldown, aber Richtung). Kind zu Eltern).

Dies ist die Definition der FormGroup-Komponente und wie ich den Eingabestatus innerhalb der FormGroup verwende, um die Validierungsmeldung (falls vorhanden) anzuzeigen:

components/UI/FormGroup.js

import { useState } from 'react'; Eingabe aus './Input' importieren; import './FormGroup.scss'; Funktion FormGroup(props) { const [message, setMessage] = useState(null); const [isInputValid, setIsInputValid] = useState(false); let className = 'form-group'; if(props.className) { className = `form-group ${props.className}`; } let labelCmp = (  {props.label}  ); if(props.sideLabelElement) { labelCmp = ( 
 {labelCmp} {props.sideLabelElement} 
 ); } Funktion isInputValidOrMessageChangeHandler(changedIsInputValid, changesMessage) { setIsInputValid(changedIsInputValid); setMessage(changedMessage); } zurückkehren ( 
 {labelCmp}  {!isInputValid && 
{message}
} 
 ); } Standard-FormGroup exportieren; 

Wie Sie dem obigen Code entnehmen können, habe ich die Zustände message definiert, um die aktualisierte message zu speichern isInputValid code> Der von der Eingabekomponente übergebene Status. Ich habe in der Eingabekomponente zwei Zustände definiert, um diese Werte zu speichern, aber ich muss in dieser Komponente zwei weitere Zustände definieren, um die aktualisierten und übergebenen Werte in der Eingabekomponente zu speichern. Das ist etwas seltsam und scheint mir nicht die beste Art zu sein, es zu tun.

Die Frage ist: Ich denke, ich kann React Context (useContext) oder React Redux verwenden, um das Propellerbohrproblem hier zu lösen. Ich bin mir jedoch nicht sicher, ob meine aktuelle Statusverwaltung schlecht ist und mithilfe von React Context oder React Redux verbessert werden kann. Denn soweit ich weiß, kann React Context in Situationen, in denen sich der Status häufig ändert, schrecklich sein, aber wenn der Kontext anwendungsweit verwendet wird, funktioniert dies. Hier kann ich einen Kontext erstellen, um das gesamte Formular zu speichern und zu aktualisieren und so eine formularweite Erweiterung zu ermöglichen. React Redux hingegen passt möglicherweise nicht am besten zum Silo und ist möglicherweise etwas übertrieben. Was denken Sie? Was könnte in dieser besonderen Situation eine bessere Alternative sein?

Hinweis: Da ich neu bei React bin, bin ich offen für alle Ihre Vorschläge zu meiner gesamten Codierung, von einfachen Fehlern bis hin zu allgemeinen Fehlern. Danke!