Je suis coincé avec ce problème ennuyeux, dans lequel, j'essaie juste de créer une barre de navigation contenant un hamburger et d'autres choses, comme ça, mais les composants ne sont pas rendus ou mis à jour lorsque je clique sur un bouton qui est censé changer l'état des composants et faire ouvrir le bouton hamburger et le menu et vice versa.

import React, {useState} from "react";
import styles from "./Navigation.module.css";
import pin from "./pin.png";
import "./NavFunctions";



function Navigation(props)   {

    let [country, setCountry] = useState("UK");
    let [city, setCity] = useState("London");
    let [response, setResponse] = useState({});
    let [MenuHamburgerToggled, setMenuHamburgerToggled] = useState(false);

        const style = {
            nav: {
                position: "absolute",
                top: "0",
                left: "0",
                width: "100vw",
                height: "150px",
                backgroundColor: "transparent"
            },

            nav_container: {
                flexDirection: "row",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                margin: "40px 100px",
                color: "white",
            },
            cnc: {
                fontFamily: '"Agency FB", serif',
                fontSize: '30pt',
            },
            hamburgerMenuToggle: {
                width: "30px",
                height: "30px",

            }
        }
        return (
            <React.Fragment>
                <Menu isOpen={MenuHamburgerToggled}/>
                <nav style={style.nav}>
                    <div style={style.nav_container}>
                        <div style={style.cnc}>
                            {country}, {city} <img style={{
                            width: "30px", height: "30px", marginLeft: "10px"
                        }} src={pin} alt="pin"/>
                        </div>
                        <div style={style.hamburgerMenuToggle}>
                            <MenuHamburger toggled={MenuHamburgerToggled} onClick={()=> setMenuHamburgerToggled(!MenuHamburgerToggled)}

                            />
                        </div>
                    </div>
                </nav>
            </React.Fragment>
        )
}

function MenuHamburger(props) {

    let [toggled, setToggled] = useState(props.toggled ? props.toggled : false);

    const handleClick = () => {
         setToggled(!toggled);
    }

    const styles = {
        toggleHamburger: {
            zIndex: "1001",
            cursor: "pointer",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggleHamburger__ic: {
            display: "inline-block",
            cursor: "pointer",
        },
        tg__hr: {
            backgroundColor: "transparent",
            border: "none",
            outline: "none",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_bir: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            WebkitTransform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_iki: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            opacity: toggled ? "0" : "1",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_och: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            WebkitTransform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },

    }

        return (
            <div style={styles.toggleHamburger}
            >
                <button style={styles.tg__hr} >
                    <div style={styles.toggleHamburger__ic}>
                        <div style={styles.toggle_bir}></div>
                        <div style={styles.toggle_iki}></div>
                        <div style={styles.toggle_och}></div>
                    </div>
                </button>
            </div>
        )


}

 function Menu(props)  {
    let [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);

     let styles = {
         Menu_container: {
             width: "100vw",
                 height: isOpen === true ? "100vh" : "0",
                 backgroundColor: "#211113",
                 transition: "all ease 1s"
         }
     }

        return (
            <div style={styles.Menu_container}>

            </div>
        )

}

export default Navigation;

0
Mohammad Kazemzadeh 13 sept. 2020 à 17:00

2 réponses

Meilleure réponse

Enfin, j'ai réussi à résoudre le problème en ajoutant useEffect comme ceci:

function MenuHamburger(props) {

    let [toggled, setToggled] = useState(props.toggled ? props.toggled : false);

    const handleClick = () => {
         setToggled(!toggled);
    }

    useEffect( () => {
        setToggled(props.toggled);
    }, [props.toggled]);

    const styles = {
        toggleHamburger: {
            zIndex: "1001",
            cursor: "pointer",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggleHamburger__ic: {
            display: "inline-block",
            cursor: "pointer",
        },
        tg__hr: {
            backgroundColor: "transparent",
            border: "none",
            outline: "none",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_bir: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            WebkitTransform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_iki: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            opacity: toggled ? "0" : "1",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_och: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            WebkitTransform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },

    }

        return (
            <div style={styles.toggleHamburger}
                 onClick={props.onClick}
            >
                <button style={styles.tg__hr} >
                    <div style={styles.toggleHamburger__ic}>
                        <div style={styles.toggle_bir}></div>
                        <div style={styles.toggle_iki}></div>
                        <div style={styles.toggle_och}></div>
                    </div>
                </button>
            </div>
        )


}

 function Menu(props)  {
    let [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);

     useEffect( () => {
         setIsOpen(props.isOpen);
     }, [props.isOpen]);

     let styles = {
         Menu_container: {
             width: "100vw",
                 height: isOpen === true ? "100vh" : "0",
                 backgroundColor: "#211113",
                 transition: "all ease 1s"
         }
     }

        return (
            <div style={styles.Menu_container}>

            </div>
        )

}

Ainsi, les composants sont désormais mis à jour à mesure que leur état change et les animations fonctionnent également correctement. merci pour le guide.

0
Mohammad Kazemzadeh 13 sept. 2020 à 14:59

Votre MenuHamburger n'est pas un composant d'élément html, donc onClick ne fonctionnera pas si vous ne l'appelez pas manuellement.

Ce que vous pouvez faire, c'est passer le onClick dans votre div dans la méthode de rendu MenuHamburger. Cela garantira que lorsque l'utilisateur cliquera sur le div, il appellera le onClick sur le parent <MenuHamburger onCLick={...}.

function MenuHamburger(props) {
    ...
    return (
        <div style={styles.toggleHamburger} onClick={props.onClick}>
    ...
}
1
lenilsondc 13 sept. 2020 à 14:10