如何在 React 和 TypeScript 中切换布尔状态？

Question

我是 React 和 TypeScript 的新手。

我想用处理函数切换布尔状态（真/假）。我读过其他关于如何在 ES6 中做到这一点的文章，但我不清楚如何在 TypeScript 中实现这一点。

到目前为止我有：

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

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

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

但我无法让它发挥作用。

有人能指出我正确的方向吗？

Answer 1

应该这样做：

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

您将需要调用setCollapseUpper来处理状态中的任何更新。

更好的是，您可以使用回调函数来更新状态：

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