React事件

最新推荐文章于 2024-07-25 18:54:37 发布

罗根-前端

最新推荐文章于 2024-07-25 18:54:37 发布

阅读量64

点赞数

分类专栏： React 文章标签： uni-app vue javascript

本文链接：https://blog.csdn.net/qq_58946831/article/details/121401353

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    class Demo extends React.Component{
        show() {
            console.log('测试点击事件show');
        }
        _blur() {
            console.log('光标离开')
        }
        name = '罗根';
        // 普通函数中this 是如何决定的
        // obj.函数名()；函数中的this 就是obj
        // 函数是谁调用的 则其中的this就指向谁
        showName() {
            console.log(this.name)
        }
        // 箭头函数
        showName1 = ()=> {
            console.log(this.name)
        }
        render() {
            // 事件的绑定：
            // vue: v-on:事件名称=“方法名称” @事件名称=“方法名称” 例：@click=""
            // angulars: (事件名称)="方法名()"
            // 小程序：bind-tap:
            // 原生：οnclick=""
            // react: onClick=""
            // 在react中, {} 代码会直接执行
           return (<div>
               {/* this.show 如果带上小括号就是立即执行 */}
               <h1 onClick={this.show}>Hello</h1>
               <input onBlur={this._blur} type="text" />
               {/* window点击时 执行了 showName 方法：window执行的函数，而DOM中的设定是window执行函数函数中的this就是undefined */}
               {/* 解决办法：强制替换 showName 中的this指向；bind(), call(), apply() */}
               {/* {}会在运行时直接执行，此写法类似于 new Demo().render() */}
               <br />
               <button onClick={this.showName.bind(this)}>打印名字</button>
               <hr />
               {/* 第二种解决方案，利用箭头函数 ()=> {} 箭头函数中的this 与申明时位置一致 */}
               <button onClick={()=> this.showName()}>打印名称</button>
               <hr />
               {/* showName1 是箭头函数，点击时 window 执行了此方法，但是此方法的this不会变化“es6语法设定” */}
               <button onClick={this.showName1}>打印名称</button>
           </div>)
        }
    }
    ReactDOM.render(<Demo />, root)
</script>
</body>
</html>

罗根-前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorig
复制链接

扫一扫

专栏目录