Cara menggunakan ReactJS untuk menyembunyikan elemen

Question

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?

Answer 1

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>
  );
}

Answer 2

const App(){
    
    const [isVisible, setIsVisible] = useState(false)
    
    return (
            <>
            {isVisible ? <label> 点击按钮后将显示此文本 </label> : null 
   }
            <button onClick={()=>setIsVisible(true)}>点击显示</button>
          
         </>
    )
    
    }