React之事件处理
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>事件处理</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 Demo extends React.Component{
/*
（1）.onXxx函数（注意大小写如onClick()）
a.js onclick jsx onClick-----------为了更好的兼容性
b.委托给组件外层，比如ul li ，委托给ul----------为了高效
（2）. event.target得到发生事件的DOM元素对象-------------不要过度使用ref
*/
/*
创建ref容器
*/
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = ()=>{
alert(this.myRef.current.value)
}
//展示右侧输入框的数据
showData2 = (event) => {
alert(event.target.value)
}
render(){
return(
<div>
<input ref={this.myRef} type="text" pacleholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" pacleholder="失去焦点提示数据" />
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>, document.getElementById("test"));
</script>
</body>
</html>
React之事件处理相关推荐
- React学习--- 事件处理
React学习- 事件处理 1.事件绑定 // onClick={function(){}} // onClick={()=>{}} // onClick={this.handleClick} ...
- React绑定事件处理函数this的几种方法
在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例. 绑定事件处理函数this的几种方法 ...
- 前端学习（3132）：react-hello-react之react中事件处理
- React事件处理及事件流
React事件处理 React事件处理是通过将事件处理器绑定到组建上处理事件,事件触发的同时更新组建的内部状态,内部状态更新会触发组件的重绘 React 元素的事件处理和 DOM 元素的事件处理很相似 ...
- 处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
- React事件系统研究总结
React作为目前前端业界最流行的mvvm框架之一已经被广大前端同学所熟知,而在日常工作中已经熟悉使用React的我们对React内部的工作流程.设计理念是否又有足够的了解呢?本文是对于React事件 ...
- 06 事件处理函数绑定与事件对象
事件处理函数绑定 DOM事件处理 addEventListener or onclick = function(){} 纯小写 React元素也采用了类似DOM0标准中的事件属性定义的方法 小驼峰 J ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- python网页前端和react有什么区别_Vue 和 React 的优点分别是什么？
谢邀.这个问题其实已经不少人邀请过,在我的 timeline 上悬浮了挺久.为什么现在突然愿意回答一下呢? 2019 年已经行至年中,Vue 即将演进到 v3.0,刚刚过去的端午节 @尤雨溪 也做了 ...
最新文章
- 皮一皮：时代不同了...
- 华硕笔记本卸载并重新安装Ubuntu16.04
- .NET Core 2.0迁移技巧之web.config配置文件
- 后台开发（3）---对软件架构的一些思维脑图整理
- unity, Gizmos.DrawMesh一个坑
- PHP 面试时常考的文件操作函数
- Htmlimg标签特写 2017-03-10 AM
- mysql 参照完整性规则_MySQL存储引擎你们知道多少？
- vue cli3 搭建项目 使用vue-router 以及 element-ui
- 计算机所建造全过程,Midas 桥梁设计建模计算，全过程图文解析！
- html实现下载功能（两种方式）
- python3.x中如何使用base64、base32、base16编码解码
- 大数据分析方法有哪几种？
- 如何批量发送邮件？小白问百度，大神秀操作，网友惊呼：666
- 【禁用U盘】电脑windows7/10注册表、组策略禁用优盘；
- 【网络安全】小白每天学一点之“监控应用程序行为” [process monitor]
- 解决浏览器下载速度慢的问题
- 很好的东子（干货很多）--把一个函数变成全局的方法及slideToggle()
- VS2013打包Windows程序部署教程
- CDR X6设计师的福利，3折特惠！