当前位置: 首页 > news >正文

【React学习】—React中的事件绑定(八)

【React学习】—React中的事件绑定(八)

一、原生JS

 <body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><button onclick="demo()">按钮3</button><script>const btn1 = document.getElementById("btn1");btn1.addEventListener("click", () => {alert("按钮1被点击了");});const btn2 = document.getElementById("btn2");btn2.onclick = () => {alert("按钮2被点击了");};function demo() {alert("按钮3被点击了");}</script></body>

在这里插入图片描述

二、React中的事件绑定

 <script type="text/babel">class Weather extends React.Component {constructor(props) {super(props);this.state = { isHot: false };}render() {return (<h1 onClick={demo}>今天天气很{this.state.isHot ? "炎热" : "凉爽"}</h1>);}}ReactDOM.render(<Weather />, document.getElementById("test"));function demo() {console.log("标题被点击了");}</script>

在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/144645.html

相关文章:

  • 记录在ubuntu 18.04系统上安装虚拟机的过程
  • C/C++ 个人笔记
  • Stm32的时钟系统以及使用SysTick滴答定时器实现延时
  • 重生c++系列之类与对象(中篇)
  • Java中synchronized基本介绍和细节讨论。使用Synchronized来解决售票超卖问题
  • java内存分区
  • 【JavaScript】V8 引擎解析 JavaScript 的过程
  • Qt:界面实时响应鼠标拖动绘制
  • Docker拉取RocketMQ及可视化界面
  • 花5分钟判断,你的Jmeter技能是大佬还是小白!
  • macOS - 安装 Python 及地址
  • 前端组件库造轮子——Tree组件开发教程
  • java打war包、jar包方式,java运行war包、jar包方式
  • “超级AI助手:全新提升!中文NLP训练框架,快速上手,海量训练数据,ChatGLM-v2、中文Bloom、Dolly_v2_3b助您实现更智能的应用!”
  • 空时自适应处理用于机载雷达——机载阵列雷达信号环境(Matla代码实现)
  • lib61850 学习笔记一 (概念)
  • 【深度学习】半监督学习 Efficient Teacher: Semi-Supervised Object Detection for YOLOv5
  • vue3鼠标拖拽滑动效果
  • 08 通过从 库1 复制 *.ibd 到 库2 导致 mysql 启动报错
  • 一生一芯9——ubuntu22.04安装valgrind
  • STM32中BOOT的作用 (芯片死锁解决方法)
  • 基于YOLOv8模型和DarkFace数据集的黑夜人脸检测系统(PyTorch+Pyside6+YOLOv8模型)
  • C++中<iostream> 的cin >> str 和<string>的getline(cin, str) 用来读取用户输入的两种不同方式的不同点
  • 微信报修系统有什么优势?怎么提升企业维修工作效率与管理水平?
  • 11.2.1-通货膨胀CPI
  • 服务器基础
  • mybatis中#{ }和${ }的区别
  • 【真人语音】讯飞星火个人声音训练及导出下载工具V0.2.exe
  • 正中优配:创业板指大涨3.47%!减速器等概念板块掀涨停潮!
  • 多功能租车平台微信小程序源码 汽车租赁平台源码 摩托车租车平台源码 汽车租赁小程序源码