广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react怎么实现点击隐藏显示
  • 542
分享到

react怎么实现点击隐藏显示

React 2023-05-14 22:05:02 542人浏览 泡泡鱼
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react怎么实现点击隐藏显示?react中元素的显示和隐藏方式的使用 在react中,我们有常用的有四种方式来显示元素的显示和隐藏,和Vue不同,vue

react怎么实现点击隐藏显示

教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。

react怎么实现点击隐藏显示?

react中元素的显示和隐藏方式的使用

在react中,我们有常用的有四种方式来显示元素的显示和隐藏,和Vue不同,vue中我们使用v-if或v-show来显示元素的隐藏和显示

下面分别介绍一下在react中隐藏和显示元素的方法

第一种:用style来显示隐藏

<script type="text/babel">
class App extends React.Component {
    state={
        isshow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {}
        <button style={{display:this.state.isShow?'block':'none'}}>张云龙</button>
        <button style={{display:this.state.isShow?'none':'block'}}>秦霄贤</button>
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

block表示显示,none表示隐藏

第二种:用三元运算符

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>

        {}
            {
            this.state.isShow?(<div>秦霄贤</div>):(<div>张云龙</div>)
            }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

第三种:通过短路逻辑进行元素显隐

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {}
          {
            this.state.isShow && <div>秦霄贤</div>
        }
        {
            !this.state.isShow && <div>张云龙</div>
        }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

第四种:函数形式

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
        love:'秦霄贤'
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }

    loves=(key)=>{
        switch(key){
            case '秦霄贤':
                return <div>秦霄贤</div>
            case '张云龙':
                return <div>张云龙</div>
        }   
    }

  render() {
    let ok=this.loves(this.state.love)
    return (
      <div>
        {}
        {ok}
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

以上就是react怎么实现点击隐藏显示的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react怎么实现点击隐藏显示

本文链接: https://www.lsjlt.com/news/206744.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react怎么实现点击隐藏显示
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么实现点击隐藏显示?react中元素的显示和隐藏方式的使用 在react中,我们有常用的有四种方式来显示元素的显示和隐藏,和vue不同,vue...
    99+
    2023-05-14
    React
  • react如何实现点击隐藏显示
    今天小编给大家分享一下react如何实现点击隐藏显示的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react实现点击隐藏显示...
    99+
    2023-07-04
  • javascript怎么实现点击按钮显示/隐藏
    本文小编为大家详细介绍“javascript怎么实现点击按钮显示/隐藏”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript怎么实现点击按钮显示/隐藏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一...
    99+
    2023-07-06
  • jquery怎么实现点击按钮显示与隐藏效果
    本文小编为大家详细介绍“jquery怎么实现点击按钮显示与隐藏效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery怎么实现点击按钮显示与隐藏效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。首先来看实...
    99+
    2023-06-30
  • jquery如何实现点击显示点击其他地方隐藏
    这篇文章主要介绍了jquery如何实现点击显示点击其他地方隐藏,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 方...
    99+
    2022-10-19
  • react如何实现显示隐藏div
    本文小编为大家详细介绍“react如何实现显示隐藏div”,内容详细,步骤清晰,细节处理妥当,希望这篇“react如何实现显示隐藏div”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。react实现显示隐藏div的...
    99+
    2023-07-05
  • php页面怎么用JavaScript实现点击按钮显示隐藏
    这篇文章主要讲解了“php页面怎么用JavaScript实现点击按钮显示隐藏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php页面怎么用JavaScript实现点击按钮显示隐藏”吧!第一步...
    99+
    2023-07-05
  • jquery实现点击按钮显示与隐藏效果
    本文实例为大家分享了jquery实现点击按钮显示与隐藏的具体代码,供大家参考,具体内容如下 首先来看实现效果 用jquery来实现这种效果是非常简单的 html <div c...
    99+
    2022-11-13
  • Vue怎么实现点击按钮显示或隐藏内容效果
    这篇文章主要介绍“Vue怎么实现点击按钮显示或隐藏内容效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么实现点击按钮显示或隐藏内容效果”文章能帮助大家解决问题。实例代码:<!DOCT...
    99+
    2023-07-04
  • jquery如何实现点击显示元素再次点击隐藏元素
    这篇文章主要讲解了“jquery如何实现点击显示元素再次点击隐藏元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何实现点击显示元素再次点击隐...
    99+
    2022-10-19
  • 怎么使用vue实现简单的点击显示与隐藏效果
    本文小编为大家详细介绍“怎么使用vue实现简单的点击显示与隐藏效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用vue实现简单的点击显示与隐藏效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。目前前端框...
    99+
    2023-07-04
  • 怎么用vue组件实现弹出框点击显示隐藏效果
    本篇内容介绍了“怎么用vue组件实现弹出框点击显示隐藏效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码如下1.在当前页面中(主页面)&...
    99+
    2023-07-04
  • Vue.js如何实现点击按钮显示/隐藏内容效果
    这篇文章主要介绍Vue.js如何实现点击按钮显示/隐藏内容效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例代码:<!DOCTYPE html> <h...
    99+
    2022-10-19
  • jquery怎么实现点击隐藏元素
    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。在jquery中,可以利用click()和hide()方法来实现点击隐藏元素。实现步骤:步骤1:利用click()函数给按钮元素绑定点击事件,并设置事件处...
    99+
    2023-05-14
    jquery javascript
  • Angular中怎么通过点击按钮控制隐藏和显示
    本篇文章给大家分享的是有关Angular中怎么通过点击按钮控制隐藏和显示,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。具体代码如下:<!...
    99+
    2022-10-19
  • JS显示隐藏功能怎么实现
    这篇文章主要介绍“JS显示隐藏功能怎么实现”,在日常操作中,相信很多人在JS显示隐藏功能怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS显示隐藏功能怎么实现”的疑惑...
    99+
    2022-10-19
  • Android TextView实现点击显示全文与隐藏功能(附源码)
    前言 相信大家在日常开发的时候,经常会遇到大段文本需要部分展示的场景,通常的做法是在隐藏的状态下文本末尾加上「显示全文」,在展开的状态下文本末尾加上「隐藏」来控制文本的展示状态...
    99+
    2022-06-06
    源码 Android
  • vue组件如何实现弹出框点击显示隐藏效果
    小编给大家分享一下vue组件如何实现弹出框点击显示隐藏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果如下图  ...
    99+
    2022-10-19
  • php页面利用JavaScript实现点击按钮显示隐藏代码
    PHP (Hypertext Preprocessor) 是一种服务器端编程语言,它适用于动态网页开发。在PHP中,我们可以使用JavaScript来控制网页的显示效果,其中包括显示和隐藏代码块。在本文中,我们将介绍如何使用PHP和Java...
    99+
    2023-05-14
    php javascript
  • JS实现点击参数面板按钮显示或隐藏数据
    当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据。如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据。打开报表在参数面板添加一个标签控件,控件名为lable,设置标...
    99+
    2023-05-31
    js 点击 显示
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作