React TypeScript -Schalter funktioniert nicht wie erwartet ⇐ JavaScript

[Anonymous]

Erstellen einer Mini-App, um das Problem zu demonstrieren, das ich mit React & TypeScript habe.

Code: Select all

import { MouseEvent, useState } from "react";

interface ToggleParams {
label?: string;
value?: boolean;
disabled?: boolean;
onToggleClick?: (
event: MouseEvent,
value: boolean
) => void;
}

const Toggle = ({
label = "",
value = false,
disabled = false,
onToggleClick = () => {},
}: ToggleParams) => {
const [enabled, setEnabled] = useState(value);

const handleClick = (event: MouseEvent) => {
if (disabled) return;
console.log("handleClick > enabled", enabled);
const newValue = !enabled;
console.log("handleClick > newValue", newValue);
setEnabled(value);
onToggleClick(event, newValue);
};

return (

{`${enabled ? "true" : "false"} ${label}`}

);
};

export default Toggle;
< /code>
Hier ist der Code, der diese Komponente testetimport { useState } from "react";
import Toggle from "./Toggle";

export default function App() {
const [toggleAll, setToggleAll] = useState(false);
const [toggleItem, setToggleItem] = useState(false);
const [toggleDisabled, setToggleDisabled] = useState(false);

console.log("Toggle state", toggleAll, toggleItem, toggleDisabled);

const onToggleAllClick = (event: any, value: boolean) => {
setToggleAll(value);
setToggleItem(value);
setToggleDisabled(value);
};

const onToggleItemClick = (event: any, value: boolean) => {
setToggleItem(value);
if (!value) {
setToggleAll(value);
setToggleDisabled(value);
}
};

return (









);
}

Der Umschalter sollte den Status ändern, wenn ich sie klicke. Wenn ich jedoch nicht auf dem ersten Klick
auf das Element Umkippung klicke.

Code: Select all

handleClick > enabled false
handleClick > newValue true
Toggle state false true false
< /code>
zeigt an, dass der Code funktioniert. Die Anzeige zeigt jedoch < /p>
anfalse Toggle All
false Toggle Item
false Toggle Disabled
< /code>
Dies bedeutet, dass die Umschaltkomponente selbst nicht geändert wurde < /p>
, um erneut darauf zu klicken, und dann die Anzeige korrekt auf diese < /p>
ändertfalse Toggle All
true Toggle Item
false Toggle Disabled

Die Konsolenausgabe ändert nicht
Ich aktualisiere die Seite, um erneut zu starten.

Code: Select all

handleClick > enabled false
handleClick > newValue true
Toggle state true true true
< /code>
Die Anzeige wird jedoch fälschlicherweise < /p>
fälschlicherweise angezeigtfalse Toggle All
false Toggle Item
false Toggle Disabled

Alle diese sollten sich von False zu True
geändert haben, wenn ich erneut auf alle klicke, die Konsole ist gleich, aber die Anzeige ändert sich zu

Code: Select all

true Toggle All
false Toggle Item
false Toggle Disabled

Umschalten Sie alle Anzeige dieses Mal korrekt geändert, aber die anderen sollten sich ebenfalls geändert haben. /> Klicken Sie jetzt erneut auf Element < /code> erneut umschalten (zweimal), damit es false < /p>
Die Anzeige ändert sich zu < /p>

Code: Select all

handleClick > enabled true
handleClick > newValue false
Toggle state false false false

Der Code hat hier in der Konsole gemäß OnToggleItemclick alle Werte hier in der Konsole korrekt geändert. Die Anzeige zeigt jedoch
immer noch falsch an

Code: Select all

true Toggle All
false Toggle Item
false Toggle Disabled

Fehler: Umschaltungen müssen ihren Wert ändern, wenn der zugrunde liegende Wert aus dem Code ändert. /> Hier ist eine Sandbox https://codesandbox.io/p/sandbox/vibrant-jackson-44g6xt