React Input -Status Reset und Space Charakter Problem in der dynamischen Checklistekomponente ⇐ JavaScript

[Guest]

Ich arbeite an einer React -Komponente, um eine Vorbereitungs -Checkliste zu verwalten, in der Benutzer Elemente hinzufügen, löschen und speichern können. Die Funktionalität funktioniert wie größtenteils beabsichtigt, aber ich begegne zwei Ausgaben: < /p>
Eingabefeldstatus Reset: < /p>
Beim Hinzufügen einer neuen Checkliste Element, das Eingabefeld (Newfield) setzt manchmal unerwartet zurück, wahrscheinlich aufgrund von Komponenten-Re-Rendern. Space Zeichenausgabe:
Leerzeichen zu Beginn oder am Ende der Eingabe werden nicht ordnungsgemäß behandelt.
Hier ist der Code -Snippet:

Code: Select all

"use client";

import { useState, useTransition } from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { LoaderSpinner } from "@/components/loader-spinner";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { delay } from "@/lib/utils";
import { XIcon, Check, CircleMinus } from "lucide-react";
import { prepCheckList } from "@/lib/utils";
import { useRouter } from "next/navigation";

export function PreparationChecklist({
isChecklistOpen,
setIsChecklistOpen,
entityId,
data,
}) {
const [isPending, startTransition] = useTransition();

const [isOpen, setIsOpen] = useState(false);
const [items, setItems] = useState(
data?.length > 0
? data
: [
{
label: "label 1",
checked: false,
isNew: false,
},
{
label: "label 2",
checked: false,
isNew: false,
},
{
label: "label 3",
checked: false,
isNew: false,
},
{ label: "label 4", checked: false, isNew: false },
{
label: "label 5",
checked: false,
isNew: false,
},
{
label: " label 6",
checked: false,
isNew: false,
},
],
);
const [newField, setNewField] = useState("");
const [isSaving, setIsSaving] = useState(false);
const [isAdding, setIsAdding] = useState(false);

const route = useRouter();

const handleCheckedChange = (index, checked) => {
setItems((prevItems) => {
const updatedItems = [...prevItems];
updatedItems[index].checked = checked;
return updatedItems;
});
};

const handleSave = async () => {
setIsSaving(true);
const response = await prepCheckList(entityId, items);
console.log("response: >>>>>>>>>", response);

await delay(1000); // Simulate API call
startTransition(() => {
route.refresh();
setIsSaving(false);
});
};

const handleAddMoreClick = () => {
if (isAdding) {
if (newField) {
// Add new item if input is not empty
setItems((prevItems) => [
...prevItems,
{ label: newField, checked: false, isNew: true },
]);
setNewField(""); // Reset the input field
setIsAdding(false); // Hide the input field
} else {
// Hide input field if clicked again with no input
setIsAdding(false);
}
} else {
// Show input field
setIsAdding(true);
}
};
const handleDeleteField = (index) => {
// Only allow deleting items with `isNew: true`
setItems((prevItems) =>
prevItems.filter((_, i) => !(i === index && prevItems[i].isNew)),
);
};
return (

 setIsChecklistOpen(!isChecklistOpen)}
>



Checklist




{items.map((item, index) =>  (


handleCheckedChange(index, checked)
}
className="h-4 w-4"
/>

{item.label}


{item.isNew && (
 handleDeleteField(index)}
>


)}


))}



{isAdding && (
 setNewField(e.target.value)}
placeholder="Add new checklist item"
className="flex-1"
/>
)}

{isAdding ? (
newField ? (

) : (

)
) : (
"Add More"
)}


{isSaving || isPending ? (

) : (
"Save changes"
)}






);
}

< /code>
Dies ist der Eingangswrapper: < /p>
import * as React from "react";

import { cn } from "@/lib/utils";
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
return (

);
});
Input.displayName = "Input";

export { Input };

Was ich ausprobiert habe:
Bezirkieren Sie die Eingabe: Ich habe versucht, den Eingabebehandler zu entlarven, aber die Das Feld setzt während der Wiederherstellungen immer noch zurück. Komponenten-Neuanschläge, wenn die Elemente aktualisiert werden. < /strong> < /p>

Wie kann ich verhindern, dass das Eingabefeld (Newfield) während
erneut reserviert wird? < /li>
Wie kann der beste Weg sind, Räume im Eingabefeld zu verarbeiten, während
sicherstellen kann, dass eine saubere Validierung verwendet wird? sehr geschätzt! Danke.