有关react中每个按钮控制自己的div显示与隐藏问题

最新推荐文章于 2023-01-03 11:12:12 发布
最新推荐文章于 2023-01-03 11:12:12 发布
阅读量8.2k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41719836/article/details/80652622
版权

题目虽然带着“react”，可是实现的思路跟react没有关系，只不过项目用的框架是react而已。

需求是这样的，页面一加载的时候从请求的接口中循环出嵌套三层的数组，

当然，这不是重点，重点是想要实现的效果是点击每个标题旁的按钮，能对应显示标题下面的内容。效果如图



实现的思路就是当点击按钮时，给最外层数组的对象添加一个boolean值，通过每次点击按钮使这个值变为与上次相反的值，来实现自元素显示与隐藏的效果。具体加在哪里呢？看图


notShow就是动态添加的值

相关代码见下


赵又又i
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
react实现div隐藏_介绍三种使用react控制元素显示和隐藏的方法
weixin_39538607的博客
12-21 685
介绍三种使用react控制元素显示和隐藏的方法，一起来了解下吧。1.通过 state 变量来控制是否渲染元素类似于 vue 的 v-if方法是通过变量来控制是否加载元素的，如果变量为false，内容就直接不会渲染的。classDemoextendsReact.Component{constructor(props){super(props);this.state={isShow:true...
React 点击按钮显示div与隐藏div
徐同保的专栏
11-07 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React 点击按钮显示div与隐藏div</title> <script src="https://unpkg.com/react@16/u
React实例1-列表渲染和按钮添加操作
Dreamer.
10-08 1523
1.渲染服务列表 现在的列表是写死的两个li标签，倘若我们需要将其变成动态的，那我们就需要把这个列表进行数据化，然后通过js代码循环到页面上。 constructor(props){ super(props) //调用父类的构造函数，固定写法 this.state={ inputValue:'' , //----------主要 代码--------start list:['推拿','敲背'] //----------主
react 动态显示表格操作列中的按钮
weixin_45609659的博客
01-03 642
react 动态显示表格操作列中的按钮
react中元素的显示和隐藏方式的使用（函数组件）
m0_72715879的博客
11-09 3049
react+hooks 做显示和隐藏
react高阶组件经典应用之权限控制详解
08-29
传统的做法是将权限检查逻辑放在每个需要控制的组件内部，如上文所示，每当需求变更时，我们需要反复修改这些组件的`render`方法。这种做法不仅增加了代码的复杂性，而且不利于维护。例如，当产品经理要求对无权限的...
js代码-es6 中class (与react相关)
07-16
React组件有不同的生命周期阶段，每个阶段都有特定的方法，如`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`等，可以在这些方法中执行特定的逻辑。 总结： ES6的`class`关键字为JavaScript...
自动创建层并且隐藏点击按钮显示层其他层隐藏
07-04
- 同时，创建一组按钮，每个按钮对应一个层的显示，如： ```html (1)">显示第1层 (2)">显示第2层 <!-- ...以此类推至第10个按钮 --> ``` 2. **CSS样式**： - 层的初始状态应该是隐藏的，可以设置一个CSS类`...
react-基础react开发的一个音乐播放器
08-15
在音乐播放器项目中，我们可以创建如`Player`、`Playlist`、`SongDetail`等组件，每个组件负责自己的逻辑和视图。 2. **JSX语法**：React引入了JSX（JavaScript XML）语法，它允许我们在JavaScript中编写类似HTML的...
div CSS样式表实现中英文双语切换导航条
11-21
为了实现双语切换，我们需要使用JavaScript或者jQuery来控制`div`的显示与隐藏。可以添加一个按钮触发切换，如： ```html ()">切换语言 ``` 然后编写JavaScript函数： ```javascript function toggleLanguage() {...
react 通过小眼睛 控制密码显示与隐藏
04-11
因为项目需要有个小功能，控制小眼睛睁眼闭眼实现密码的可读还是隐藏。亲身使用总结，有问题可以随时联系我。
Antd单独隐藏Modal对话框的默认ok或cancel按钮
hoaxxcj的博客
04-13 1万+
有时候我们需要单独隐藏Modal对话框的默认确定或取消按钮，设置:footer="null"会把两个按钮都隐藏。 Antd有提供两个参数用于单独修改确定、取消按钮：对于确定按钮，设置:ok-button-props="{style:{display:'none'}}"；对于取消按钮，设置:cancel-button-props="{style:{display:'none'}}"。这样就能快速隐藏对应按钮了。 ...
vue Antd单独隐藏Modal.confirm(this.$confirm方式)对话框的默认ok或cancel按钮
zyf971020的博客
10-29 4444
vue Antd单独隐藏Modal.confirm(this.$confirm方式)对话框的默认ok或cancel按钮
React中通过diaplay实现控件按钮的呈现与隐藏
热门推荐
只如初见0706的博客
03-16 3万+
1、实现效果通过单击编辑图标实现页面中对应按钮的呈现与隐藏、效果图如下2、代码实现import React, { Component } from 'react'; import '../../../style_css/antd.css'; import { Layout,Icon,Row, Col} from 'antd'; class Index extends Component { ...
antd隐藏弹框确认按钮＜a-modal/＞
ffl886的博客
02-09 3385
antd隐藏弹框确认按钮<a-modal/>
react.js 显示隐藏效果
sunjunyue的博客
10-05 1万+
constructor(props) { super(props); // 设置 initial state this.state = { style: {display:"block",color:"red"}, actionTitle:false, }; } sh
React if 显示与隐藏(切换)
周家大小姐
03-24 5759
需求: 点击Button按钮让内容在显示与隐藏中切换 import React, { Component } from 'react'; import './App.css'; import Footer from './components/layout/Footer'; class App extends Component { state={ persons:[ ...
react中如何实现一个按钮的动态隐藏和显示（有效和失效）
chunchun1230的博客
03-06 2148
初始准备工作 constructor(props) { super(props); /* * 构建导出数据的初始参数，结合用户下拉选择后动态设置参数值 * */ this.state = { btnStatus: false, dateStart: '', dateEnd: '', currentTy...
react组件显示隐藏切换效果
业余前端爱好者
05-16 1万+
这段时间开始接触react,之前陆续五个月的vue开发,考虑公司项目日益庞大,决定后期使用react 作为小小白,也是在不断学习成长,还望老司机勿喷
react 点击一次按钮增加一个div
最新发布
05-17
可以通过在按钮的点击事件中创建一个新的 div 元素并添加到指定的容器中来实现。以下是一个示例： ```jsx import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); const [items, setItems] = useState([]); function handleClick() { const newDiv = <div key={count}>New div</div>; setItems(prevItems => [...prevItems, newDiv]); setCount(prevCount => prevCount + 1); } return ( <div> <button onClick={handleClick}>Add div</button> {items} </div> ); } export default App; ``` 在上面的代码中，我们使用了 `useState` hook 来分别存储 div 的数量和 div 的列表。当按钮被点击时，我们创建一个新的 div 元素，并将其添加到 div 列表中。注意，我们为每个 div 元素指定了一个唯一的 `key` 属性，这是 React 中必需的。最后，我们将 div 列表渲染到页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值