功能組件中的更改狀態反應

Question

我是 React 的新手，被一個看似簡單的任務阻礙了。 我有一個嵌套的Header組件，其中有一個HamburgerButton組件。 單擊后者應該會出現一個sidenav，但現在我希望圖標從“漢堡包”變為大的“X”。 這是我的父組件：

import { MyMoviesLogo } from 'components/Icons';
import HamburgerButton from 'components/HamburgerButton/HamburgerButton'; 

import styles from './Header.module.css';


const Header = (): JSX.Element => {
  const [isActive, setIsActive] = useState(false);
  return (
    <header className={styles.header}>
      <MyMoviesLogo className={styles.headerIcon} />
      <HamburgerButton
      isActive={false}
      />
    </header>
  );
};

export default Header;

這里是HamburgerButton

import styles from './HamburgerButton.module.css';

type HamburgerButtonProps = {
    isActive: boolean;
    onClick?: () => void;
};

const addMultipleClassNames = (classNames: string[]): string => classNames.join(' ');

const HamburgerButton = ({ isActive, onClick }: HamburgerButtonProps): JSX.Element => {

    return (
        <div className={isActive ? addMultipleClassNames([styles.hamburger, styles.active]) : styles.hamburger} onClick={onClick}>
            <div className={styles.bar}></div>
            <div className={styles.bar}></div>
            <div className={styles.bar}></div>
        </div>
    );
}

export default HamburgerButton;

這是我的HamburgerButton.module.css文件：

.hamburger {
    cursor: pointer;
    display: block;
    width: 25px;
}

.bar {
    background-color: var(--hamburger-button-global);
    display: block;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    width: 25px;
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

手動將isActive更改為false以驗證是否按要求應用了樣式。 我的問題是，我怎么能做到這樣當我點擊圖標時，它的狀態會被切換？ 我熟悉像useState這樣的 React 鈎子，但不能完全組合在一起。

任何幫助將不勝感激。

謝謝你。

PS：這可能很明顯，但我使用的是TypeScript 。

Answer 1

您應該使用<HamburgerButton />中的 onClick 道具來更改父狀態。

<HamburgerButton isActive={isActive} onClick={() => { setIsActive(oldState => !oldState) } />