隐藏元素的ReactJS使用方法-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

隐藏元素的ReactJS使用方法

P粉136356287 2023-09-07 19:21:22

[React讨论组]

623

我想在屏幕上显示一段文本，并且只有在按下按钮时才隐藏，但我不知道如何做。我想使用useState来实现这个效果：

const [textVisibility, setTextVisibility] = useState(true)
<button onClick={() => setTextVisibility(false)} />

我发现的问题是，当点击按钮时，页面会重新渲染，可见性的值将会变为默认值（true）。我该怎么做？

P粉136356287

全部回复(2)

P粉5790084122023-09-08 10:05:34 2楼

Idk what are you experiencing but for me it works fine the following code:

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

赞 +0

添加回复

P粉1551282112023-09-08 00:20:36 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>