react数组遍历与onClick()点击事件

2023-11-19

import { Component } from 'react';

const user = [
    {
        name:'Tom',
        age:18,
        sex:'男'
    },
    {
        name:'alice',
        age:18,
        sex:'女'
    },
    {
        name:'Time',
        age:18,
        sex:'女'
    }
]
class home extends Component{
    constructor(props){
        super(props)
        this.state = {
            
        }
    }
    getitem(item){
        console.log(item);
    }
    render(){
        return(
            <ul>
                {   //使用map()方法遍历数组
                    user.map((item,index) => (
                    //给标签添加onClick()点击事件
                        <li key={index} onClick={() => this.getitem(item)}>
                            <span>姓名:{item.name};</span>
                            <span>性别:{item.sex};</span>
                            <span>年龄:{item.age}</span>
                        </li>
                    ))
                }
            </ul>
        )
    };
    
}
export default home;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react数组遍历与onClick()点击事件 的相关文章

随机推荐

  • 【Python】Jupyter Notebook无法运行代码,不可重命名且提示error和自动保存失败时如何操作?

    Python Jupyter Notebook无法运行代码 且提示error和自动保存失败时如何操作 Anaconda的Jupyter Notebook作为优秀的网页编辑器 非常适用于编写Python程序 但往往可能因安装版本不兼容等原因而
  • Flutter中的依赖注入——get_it

    Flutter社区的一个library get it 视频介绍 Flutter Dependency Injection For Beginners Complete Guide 视频对应的博文 Dependency Injection i
  • JavaWeb开发中出现DataSource读取不到怎么办呢?(详细,适合初入门的程序员)

    这样的问题是怎么产生的呢 其实啊也不难 来吧 跟我走一遍 目录 前言 二 使用步骤 1 基本的JavaWeb项目的结构 1 1 创建一个JavaWeb项目 1 2 配置文件的配置 1 3 重点来了 2 DBUtil的代码内容 3 测试 总结
  • 树的广度优先遍历与深度优先遍历算法

    1 树的广度优先遍历算法 广度优先遍历算法 又叫宽度优先遍历 或横向优先遍历 是从根节点开始 沿着树的宽度遍历树的节点 如果所有节点均被访问 则算法中止 如上图所示的二叉树 A 是第一个访问的 然后顺序是 B C 然后再是 D E F G
  • 数据库实体关系图(ERD)

    数据库是软件系统中不可或缺的一个组成部分 若能在数据库工程中好好利用 ER 图 便能让您生成高质量的数据库设计 用于数据库创建 管理和维护 也为人员间的交流提供了有意义的基础 今天 我们将为你深入介绍 ER 图表 通过阅读本ERD指南 您将
  • Gikee 大数据

    据Gikee数据显示 今日13 58分 地址 1MAhRt279uYmVC1dUxKR6dWwEULBJT34Nh 向地址 1Fc4QQu6nEc4snAe4HAb4Kryd8koH89pYk 转了34010个BTC 价值约2 17亿美元
  • stm32USB之模拟U盘

    STMF0 W25Q32模拟U盘 1 第一次写博客 如有错误 请及时指正 如有表达不通顺的地方 敬请谅解 2 本篇文章主要描述如何使用STM32cube配置USB 使用的主控为STM32F072 Flash为W25Q32 使用的主控RAM只
  • scrapy爬虫错误一:无法爬到期望的数据

    最近在开始学习scrapy爬虫 遇到了一处很坑的地方 在屏幕上输出的debug信息总是没有任何结果就直接提示 scrapy statscollectors INFO Dumping Scrapy stats scrapy core engi
  • 2023算法面试题1

    1 介绍SAM模型 2 大语言模型的微调方法 3 yolov8与yolov5的区别 4 介绍LoRA和QLoRA微调技术 5 negative prompt怎么做的 6 stable diffusion的结构与原理
  • tc 流控脚本

    系统平台 RedHat AS4 root bridgenet software uname a Linux bridgenet 2 6 9 42 ELsmp 1 SMP Wed Jul 12 23 27 17 EDT 2006 i686 i
  • upf仿真例子

    原文链接 关于什么是UPF以及电源域等等概念赛宝龙在这里就不多说了 有兴趣的可以查阅IEEE1801 2013标准 先上低功耗要求 即power intent 顶层模块为TOP 而TOP中例化了一个子模块 其例化名为instA1 具体的代码
  • 危化安全生产信息化平台在煤化领域的应用

    一 背景介绍 煤化工行业是一个集煤炭 石油 化工等多种产业于一体的综合性行业 其特点是工艺流程复杂 设备繁多 安全隐患大 近年来 随着煤化工行业的快速发展 安全生产问题日益凸显 为了有效提高危化安全生产水平 某煤化工企业引入了信息化技术 搭
  • Springboot+Websocket中@Autowired注入service为null的解决方法

    使用工具类用于从Spring的上下文中去获取到类的实例 ServerEndpoint websocket userId Component 关键点1 public class WebSocket private static UserSer
  • 高效程序员的40个好习惯和行为方式

    每一个好的习惯 开头都会相应有一个唱反调的句子哦 1 做事 出了问题 第一重要的是确定元凶 找到那个人 一旦证实了是他的错误 就可以保证这样的问题永远也不会再发生了 指责不会修复bug 把矛头对准问题的解决办法 而不是人 这是真正有用处的正
  • Modbus​协议​深入​讲解_NI

    from https www ni com zh cn innovations white papers 14 the modbus protocol in depth html 已 更新 Mar 5 2019
  • hutool的json工具完成list和json转换

    将json和list相互转换 import cn hutool json JSONArray import cn hutool json JSONUtil List转Json maps是List类型的参数 String json JSONU
  • 因果系列文章(10)—— 因果关系发现

    如何从纷繁复杂的数据中发现其中隐含因果关系 就是因果关系发现 casual discovery 要做的工作 本节简要总结这方面的工作 主要材料来源于 Elements of Causal Inference Foundations and
  • 基于Fruits-360数据集构建CNN进行水果识别实验

    基于Fruits 360数据集的水果识别项目 前段时间导师要求做一个神经网络可视化的项目 要将水果数据集进行训练得到模型 用于TensorSpace可视化 前前后后捣鼓了很久 现在回过头总结一下整个项目过程 写下这篇博客记录遇到的问题 有任
  • CTF刷题

    刷题网站 bugku BUUCTF 本文记录了在刷题过程中所学到的知识点 坚持每天刷5道题 持续更新 坚持就是胜利鸭 CTF 1 bugku Simple SSLI 1 根据题目SSLI即服务端模板注入攻击 服务段接收用户输入 将其作为we
  • react数组遍历与onClick()点击事件

    import Component from react const user name Tom age 18 sex 男 name alice age 18 sex 女 name Time age 18 sex 女 class home e