Der beste Weg, um die Validierung der Zahleneingabe in React zu handhaben

Der Umgang mit Zahleneingaben in React kann mühsam sein, insbesondere wenn Sie sicherstellen müssen, dass sie die richtige Größe haben oder die richtige Anzahl an Dezimalstellen haben. Einfache Dinge mögen einfach erscheinen, aber wenn man sich erst einmal ans Eingemachte macht und versucht, benutzerdefinierte Benutzererlebnisse zu erreichen, kann der Code schnell chaotisch werden.

Ein gängiger Ansatz, den die meisten von uns verwenden, besteht darin, eine benutzerdefinierte Validierungslogik zu schreiben, die die Benutzereingabe im onChange-Handler einschränkt.

So etwas in der Art

function NumberInput({ value, onChange, min, max, }: { value: number; onChange: (val: number) => void; min?: number; max?: number; }) { const changeHandler = (e: React.ChangeEvent) => { const val = +e.target.value; if (min != null && val < min) { onChange(min); return; } if (max != null && val > max) { onChange(max); return; } onChange(val); }; return (  ); }

Diese Logik sieht auf den ersten Blick gut aus, aber wenn Sie sie bereits ausprobiert haben, wissen Sie, dass sie viele unerwartete und seltsame Verhaltensweisen mit sich bringt und überhaupt keine gute Benutzererfahrung bietet!

Ein anderer Ansatz ist die Verwendung von Standard-HTMLElement mit den eingebauten Validierungen unter Verwendung von Attributen wie min, max, maxLength usw. Es fehlen jedoch das sofortige Feedback und die Eingabebeschränkungen, die wir normalerweise implementieren möchten.

Am Ende googeln wir uns nach Stack Overflow und finden einige...hackigeLösungen.

• Verwenden Sie onKeyPress und validieren Sie die Eingabewerte manuell.
• Verwenden Sie das Musterattribut und fügen Sie Regex hinzu, um die Zahl zu validieren (was mit type="number" nicht funktioniert, also müssen wir es zum Typ="text" machen).
• und was nicht...

Nach vielen Versuchen und Irrtümern habe ich endlich einen besseren Weg gefunden, dies zu tun.

Die Lösung

Wir können die integrierte HTML-Eingabevalidierung mit benutzerdefiniertem Javascript nutzen, um eine perfekte Lösung zu erstellen.

Hier ist die Komponente

// Interface for props overriding the default value and onChange // attribute to accept only numeric value export interface NumberInputProps extends Omit, "onChange"> { onChange: (val: number) => void; value: number; } function NumberInput({ value, onChange, min, max, step, ...props }: NumberInputProps) { // Internal input state to avoid weird behaviors with empty inputs const [input, setInput] = React.useState(value?.toString() || ""); const changeHandler = (e: React.ChangeEvent) => { // Using HTML input validity API to validation if ( (max != null && e.target.validity.rangeOverflow) || (min != null && e.target.validity.rangeUnderflow) || (step != null && e.target.validity.stepMismatch) ) return; const val = +e.target.value; setInput(e.target.value); onChange(val); }; // To ensure the external updates are reflected in the input element React.useEffect(() => { setInput(value.toString()); }, [value]); return (  ); }

Mit diesem Ansatz können wir die integrierten HTML-Validierungen nutzen und auch die ungültige Benutzereingabe für Zahlen einschränken.

Sehen Sie sich Live-Beispiele an und spielen Sie herum

Bonus

Wir können diese Logik wiederverwendbar machen, indem wir sie in einem benutzerdefinierten Hook wie diesem extrahieren

export const useNumberInput = ({ value, onChange, min, max, step, }: { value: number; onChange: (val: number) => void; max?: number; min?: number; step?: number; }): InputHTMLAttributes => { const [input, setInput] = useState(value?.toString() || ""); const changeHandler = (e: React.ChangeEvent) => { if ( (max != null && e.target.validity.rangeOverflow) || (min != null && e.target.validity.rangeUnderflow) || (step != null && e.target.validity.stepMismatch) ) return; const val = +e.target.value; setInput(e.target.value); onChange(val); }; useEffect(() => { setInput(value.toString()); }, [value]); return { type: "number", value: input, onChange: changeHandler, min, max, step, }; };

Und verwenden Sie es bei Bedarf in jeder Komponente (die natürlich über ein Eingabeelement verfügt).

export default function CustomInput() { const [value, setValue] = useState(0); const inputProps = useNumberInput({ value, onChange: setValue, min: 1, max: 50, }); return ( 
  onChange(value + 1)}> +   onChange(value - 1)}> -   
 ); }

Fügen Sie gerne Kommentare hinzu und schlagen Sie Verbesserungen vor!

Das obige ist der detaillierte Inhalt vonDer beste Weg, um die Validierung der Zahleneingabe in React zu handhaben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!