Verzögertes Textfeld (DebouncedTextField)

DebouncedTextField ist eine Variante der Standard-TextField-Komponente, die dafür ausgelegt ist, die Auslösung des onChange-Callbacks zu verzögern. Diese Verzögerung hilft, die Anzahl der onChange-Aufrufe für Eingaben zu reduzieren, die häufige Aktualisierungen haben können, z. B. während der Texteingabe.

Verwendung

Um DebouncedTextField zu verwenden, importieren Sie es aus Ihren Komponenten. Es unterstützt alle TextField-Props einschließlich value, onChange und andere.

Einfaches DebouncedTextField

Dieses Beispiel zeigt eine grundlegende Verwendung des DebouncedTextField und demonstriert, wie es zur Behandlung von Wertänderungen mit einem Verzögerungsmechanismus verwendet werden kann, um die Anzahl der Aktualisierungen zu reduzieren.

import React, { useState } from "react";
import { DebouncedTextField } from "@firecms/ui";

export default function DebouncedTextFieldBasicDemo() {
    const [value, setValue] = useState("");

    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setValue(event.target.value);
    };

    return (
        <div>
            <DebouncedTextField
                value={value}
                onChange={handleChange}
            />
        </div>
    );
}