Je souhaite afficher un texte à l'écran et le masquer uniquement lorsque vous appuyez sur un bouton, mais je ne sais pas comment faire. Je souhaite utiliser useState pour obtenir cet effet :
const [textVisibility, setTextVisibility] = useState(true)
<button onClick={() => setTextVisibility(false)} />
Le problème que j'ai trouvé est que lorsque vous cliquez sur le bouton, la page sera restituée et la valeur de visibilité passera à la valeur par défaut (vrai). Que dois-je faire?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je ne sais pas, qu'est-ce que tu vis, mais pour moi, ça fonctionne bien, le code suivant :
import React from 'react'; import {useState} from 'react'; export function App(props) { const [textVisibility, setTextVisibility] = useState(true) return ( <div className='App'> {textVisibility && <h1 onClick={() => setTextVisibility(!textVisibility)}>Hello React.</h1>} <button onClick={() => setTextVisibility(false)}>Invisible</button> <button onClick={() => setTextVisibility(true)}>Visible</button> </div> ); }const App(){ const [isVisible, setIsVisible] = useState(false) return ( <> {isVisible ? <label> 点击按钮后将显示此文本 </label> : null } <button onClick={()=>setIsVisible(true)}>点击显示</button> </> ) }