react入门----事件监听
2024-10-11 16:07:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- react核心库 -->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<!-- 提供与dom相关的功能 -->
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<!-- 将es6代码转换为es5语法格式 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var TestClickComponent = React.createClass({
handleClick: function (event) {
var tipE = ReactDOM.findDOMNode(this.refs.tip)
if(tipE.style.display === 'none') {
tipE.style.display = 'inline'
} else {
tipE.style.display = 'none'
}
<!-- 阻止浏览的冒泡事件和默认行为 -->
event.stopPropagation()
event.preventDefault()
},
render: function () {
return (
<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
</div>
)
}
})
var TestInputComponent = React.createClass({
<!-- getInitialState使用用来初始化state的状态的-->
getInitialState: function () {
return {
inputContent: ''
}
},
changeHandler: function(event) {
<!-- this.setState是用来修改state的状态 -->
this.setState({
inputContent: event.target.value
})
},
render: function () {
return(
<div>
<!-- 这里是通过驼峰试的命名来绑定事件，例如onClick，onChange等等，他们的的值是一个js表达式-->
<input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
</div>
)
}
})
ReactDOM.render(
<div>
<TestClickComponent/>
<br/>
<br/>
<TestInputComponent/>
</div>,document.getElementById('container'));
</script>
</body>
</html>
最新文章
- Android 学习心得 快速排序
- vi
- Android--Toast(吐司)的基本使用
- Decorator装饰模式
- Raspberry Pi B+ 定时向物联网yeelink上传CPU GPU温度
- c++线程传参问题
- BFC--绝对值得你思考
- XML格式以及相关libxml库学习
- vijos p1071新年趣事之打牌
- shell编程——if语句 if -z -n -f -eq -ne -lt
- 关于考虑浏览器兼容性时间的工具demo
- atan(正切函数)
- 值得关注的10个python语言博客（转）
- 直方图均衡化CImg实现
- 邓_tp_笔记
- 同一脚本sh 脚本名 报Syntax error: "(" unexpected而./脚本名不报错，求解！！
- HDU 5023线段树区间染色,统计区间内颜色个数
- jquery.autocomplete 搜索文字提示
- python聚类算法实战详细笔记 (python3.6+(win10、Linux))
- Python爬虫requests判断请求超时并重新发送请求