React之事件绑定
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>state事件绑定</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- react-dom,操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 此处一定要写babel -->
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
//初始化状态
this.state={isHot:true}
}
render(){
const {isHot} =this.state;
return <h1 onClick={demo}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'));
function demo(){
console.log("标题被点击了");
}
</script>
</body>
</html>
React之事件绑定相关推荐
- React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件绑定 组件定义 (参数传递) for.map循环 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件 ...
- 深入解析react关于事件绑定this的四种方式
这篇文章主要介绍了详解react关于事件绑定this的四种方式,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在react组件中,每个方法的上下 ...
- JSX详解React的事件绑定事件参数的传递
一.认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢? 它不是一段字符串(因为没有使用引号包裹),它看起来是一段HTML原生,但是我们能在js中直接给一个变量赋值html吗? 其实是 ...
- react之事件绑定（this、传参）
一.事件绑定函数中this 默认情况下,this指向undefined import React from 'react' export default class ThingBind extends ...
- React 项目--button 绑定事件（15）
不知不觉中写博客已经成为了一种习惯,不仅仅是一种学习知识吧,也是一种清楚自己学习了那些的内容.在前面的博客中我们慢慢的介绍了一些react基本的语法,现在我们继续来react按钮绑定事件 环境准备 首 ...
- spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)
1. 自动绑定 (事件绑定) 绑定this: React为什么要这么做? 是js中this绑定方式决定的,和react工作方式无关. 函数处理, 是作为回调传递的,这样就会丢失了上下文, 所以this ...
- React学习笔记二 通过柯里化函数实现带参数的事件绑定
class Login extends React.Component {state = {username: '',password: ''}saveFormData = (type) => ...
- html与js项目引入react框架之绑定事件
一.react的引入 需要引入三个文件 1.react.js https://unpkg.com/react@17/umd/react.development.js https://unpkg.com ...
- React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...
最新文章
- pca主成分分析结果解释_SKLEARN中的PCA(Principal Component Analysis)主成分分析法
- 错误fatal error: curl/curl.h: No such file or directory解决方案
- vue2.0s中eventBus实现兄弟组件通信
- 杂项：E-Learning
- mysql parameter_C#MySqlParameter问题
- （11）verilog语言编写加减乘除
- scikit-image 库简介
- linux基础命令一、
- centos 5.6 x86 安装 文泉驿字体
- python对比多个excel数据_python-pandas两个相同格式的excel对比输出不同内容
- 吴恩达深度学习作业之deepleraning_L1W2_h2
- STM32单片机介绍2
- moc 文件自动生成
- 串口打印调试信息（干货）
- mysql 1032 1062_MySQL 1032和1062跳过错误总结
- poi 公式转 图片_三阶魔方公式符号图解V2.0(2017/12/15)_碧海风云
- 初入职场的你知道如何向领导邮件汇报工作吗
- PHP7新特性-简述
- 那些你可能用得上的在线办公神器系列（三）
- Sublime Text使用技巧