Saya mahu menunjukkan teks pada skrin dan menyembunyikannya hanya apabila butang ditekan, tetapi saya tidak tahu bagaimana untuk melakukannya. Saya mahu menggunakan useState untuk mencapai kesan ini:
const [textVisibility, setTextVisibility] = useState(true)
<button onClick={() => setTextVisibility(false)} />
Masalah yang saya dapati ialah apabila butang diklik, halaman akan dipaparkan semula dan nilai keterlihatan akan berubah kepada nilai lalai (benar). apa patut saya buat?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Idk apa yang anda alami tetapi bagi saya ia berfungsi dengan baik kod berikut:
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> </> ) }