javascript - Jak přepínat boolean stav v Reactu a TypeScriptu?

Jsem nový v Reactu a TypeScriptu.

Chci přepínat boolean stav (true/false) pomocí handler funkce. Četl jsem jiné příspěvky o tom, jak to udělat v ES6, ale není mi jasné, jak toho dosáhnout v TypeScriptu.

Zatím mám:

  const MyComponent = () => {
    const [collapseUpper, setCollapseUpper] = React.useState(true);

    const handleCollapse = () => {
      collapseUpper = !setCollapseUpper;
    };

    return (
       <Link onClick={handleCollapse}>More</Link>
       <Collapse in={collapseUpper}>
         //content

Ale nemohu to rozchodit.

Může mi někdo ukázat správný směr?

Odpověď č. 1

Takto by se to mělo dělat:

const handleCollapse = () => {
  setCollapseUpper(!collapseUpper);
};

Budete muset zavolat setCollapseUpper, abyste řešili jakékoli aktualizace stavu.

Ještě lepší je, že můžete použít funkci zpětného volání k aktualizaci stavu:

const handleCollapse = () => {
  setCollapseUpper((prevState) => !prevState);
};

Odpověď č. 2

musíte změnit hodnotu collapseUpper, ne setCollapseUpper:

const [collapseUpper, setCollapseUpper] = React.useState(true);

const handleCollapse = () => {
  setCollapseUpper(!collapseUpper);
};