代码编织梦想

复习

原生js进行事件绑定

使用原生js事件绑定的三种方式 行内事件绑定、使用on进行事件绑定、使用addEventListener进行事件绑定

  • [1]在行内进行事件绑定:在行内通过 onxxx=‘方法名()’ 进行事件绑定;
  • [2]通过on关键字进行事件绑定:通过 dom.onxxx= function(){ } 进行事件绑定
  • [3]通过addEventListener方法进行事件绑定 :通过 dom.addEventListener(事件类型,方法名,bol)

当事件被触发时就会执行对应的方法

举例说明

需求:默认显示文本 今天天气炎热,当点击文本时显示 今天天气凉爽

  • 实现1:在行内进行事件绑定
    通过行内进行事件绑定,触发事件时是自动调用的事件函数,this指向window
    <div id="test" onclick="toedittext()">今天天气炎热</div>
    <script>
      function toedittext(){
         const content = document.getElementById('test').innerHTML
         document.getElementById('test').innerHTML= content=='今天天气炎热' ? '今天天气寒冷' : '今天天气炎热'
         console.log(this) // window
    }
    </script>
    
  • 实现2:通过on关键字进行事件绑定
     document.getElementById('test2').onclick = function(){
        const content = document.getElementById('test2').innerHTML
        document.getElementById('test2').innerHTML= content=='今天天气炎热' ? '今天   天气寒冷' : '今天天气炎热'
        console.log(this) // dom元素
     }
    
  • 实现3:
      // [3] 通过addEventListener来进行事件绑定
     document.getElementById('test3').addEventListener('click',     function(){
       const content = document.getElementById('test3').innerHTML
       document.getElementById('test3').innerHTML= content=='今天天气炎热' ? '今天天气寒冷' : '今天天气炎热'
       console.log(this) // dom元素
     },false)
    
总结this指向

使用行内方式进行事件绑定,在事件被触发时是直接调用,因此方法内的this指向为Window;
在使用关键字或方法进行事件绑定,在事件被触发时是通过dom元素调用,因此方法内部的this指向为 dom元素

react中进行事件绑定

在react中这三种方式均支持,但是为了减少dom操作,更推荐使用行内方式进行事件绑定

语法
在行内通过 onXxx='方法名' 进行事件绑定
  1. 与原生区别:
  • 事件名
    • react为驼峰命名(onXxx)
    • 原生为小写(onxxx)
  • 绑定的值
    • react为方法名
    • 原生为方法的调用
  1. 为什么react中事件绑定与原生js事件绑定不一致?
  • 不使用onxxx而用onXxx
    • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件,也就是说react将所有事件在原生基础上进行了一个封装
      • –为了更好的兼容性
      • –为了更加高效–通过事件委托方式处理的(委托给组件最外层的元素)
  • 绑定的是函数而不是函数调用
    • 实现原理不同,react在调用render函数时会先获取vdom,若是发现存在事件绑定,
      • 若是绑定的值为一个函数那么就是在事件触发时 直接调用该函数
      • 若是绑定的值为函数调用 ,那么会在调用render函数的时候同时会将该函数调用-> 相当于给事件绑定的是该函数的返回值了
react事件的this指向
 <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://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  class Mycomponent extends React.Component{
    render(){
      console.log(this) // 实例化对象
      return <h1 onClick={this.test}>测试事件绑定</h1>
    }
    test(){
      console.log(this) // undefined
    }
  }
  ReactDOM.render(<Mycomponent />, document.getElementById('test111'))
</script>
  • 事件绑定的函数的this指向的是undefiend
  • 原因:
    • 当事件触发时,react会在内部直接调用该函数
    • 因此this应该指向window;
    • 但是代码在进行编译之前会先通过babel进行编译(将jsx编译为js)
    • babel编译是处于严格模式下
    • 因此this指向为undefiend
  • 但是在函数中经常通过this指向获取某些数据,因此如果想要将this指改为实例化对象
    • 1.通过显示绑定-bind
      <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://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
      class Mycomponent extends React.Component{
        constructor(props){
          super(props)
          // 此处this指向了实例化对象
          // 【1】 寻找test方法,在原型对象中找到test方法
         // 【2】通过bind将方法的this指向修改为实例化对象(注:原型对象上的test方法的this还是指向undefiend)
         // 【3】接收返回的方法并添加在实例化对象上
          this.test = this.test.bind(this)
        }
       render(){
         console.log(this) // 实例化对象
         return <h1 onClick={this.test}>测试事件绑定</h1>
       }
       test(){
         console.log(this) 
       }
      }
       ReactDOM.render(<Mycomponent />, document.getElementById('test111'))
      </script>
      
    • 2.通过箭头函数获取this指向(推荐)
      <script type="text/babel">
      class Mycomponent extends React.Component{
        render(){
          console.log(this) // 实例化对象
          return <h1 onClick={this.test}>测试事件绑定</h1>
        }
        // 箭头函数本身没有this指向会通过作用于链寻找上一级的this指向
        // 需要注意:通过赋值的方式的函数会添加在实例化对象上而不是原型对象上
        test=()=>{
          console.log(this) // 实例化对象
        }
      }
      ReactDOM.render(<Mycomponent />, document.getElementById('test111'))
    </script>
    
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43260366/article/details/127967921

react学习笔记之五:事件绑定监听_月半叫做胖的博客-爱代码爱编程

5.事件的监听 具体代码可以参考我的github中的first-react 上面我们是通过setTimeout实现对于state中content的变化,我现在通过点击事件来控制其中的参数 class Content

react学习笔记(四)style绑定&class绑定-爱代码爱编程

react --style绑定 style字面量对象绑定 // state数据 this.state = { a:10, b:20, txtColor:"#ff0000" } //属性绑定 <p style={{color:this.state.txt

02_react实例_笔记-爱代码爱编程

文章目录 1. 使用React脚手架创建一个React应用1). react脚手架2). 创建项目并启动3). 使用脚手架开发的项目的特点4). 组件化编写项目的流程2. app1: 实现一个评论管理功能1). 拆分组件:2). 确定组件的state和props:3). 编写静态组件4). 实现动态组件5). 代码回顾分析5.1 App.jsx5.

React入门笔记(三):React状态、事件绑定-爱代码爱编程

四、React状态 4.1、React的state react的state相较于props它可以对状态进行更改,这也是react中很重要的一个部分。在类组件中它在construor函数中定义: constructor(props) { super(props); //状态(数据) -- view //构造函数初始化数据,将需要

React笔记之事件绑定的写法-爱代码爱编程

类组件的事件绑定 <button onClick={() => this.addN()}>n+1</button> 这种写法是正常的,传一个函数给onClick即可,注意大小写。 <button onClick={this.addN}>n+1</button> 这种写法是错误的,这样会使得 thi

ReactP3_JSX使用_React事件绑定_this绑定问题_事件参数传递_React条件渲染_React列表渲染-爱代码爱编程

ReactP3_JSX使用_React事件绑定_this绑定问题_事件参数传递_React条件渲染_React列表渲染 JSX使用——绑定属性普通属性的绑定class的绑定内联样式绑定React事件绑定和this绑定的问题事件参数传递React条件渲染列表渲染 这边是react学习笔记,期间加入了大量自己的理解,用于加强印象,若有错误之处还请多

React学习笔记之事件绑定-爱代码爱编程

React学习之事件绑定 React事件绑定也是React中比较有趣的地方,涉及到了很多JavaScript中比较底层的知识。 一、事件绑定 在React中,想要绑定事件,可以这么实现 class Test extends Component { state = { }; test1(e) { //this 为 undefined

React 学习笔记 —— 事件绑定和 state 属性修改-爱代码爱编程

代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v

React_02 学习笔记-爱代码爱编程

目录 目标 一、生命周期 二、组件传值 2.1、父组件与子组件传值 2.2、子组件传值给父组件 3.3、跨组件通信 三、网络请求 3.1、axios 3.2、发起请求 3.3、react 的反向代理 四、高阶组件(HOC) 4.1、传统函数方式调用 4.2、使用装饰器调用 4.3、memoization ( 计算属性 - 记忆组

React学习笔记_02-爱代码爱编程

React 组件和状态 react 组件 1,组件的两种创建方式 1,函数组件2,类组件1,函数组件:使用 JS 的函数(箭头函数)创建的组件 约定:函数名必须以大写字母开头,函数组件必须有返回值,表示该组件的结构 function Hello() { return ( <h1>哈哈哈哈</h1> )

React学习笔记_03-爱代码爱编程

React 表单处理 表单受控组件 html中的表单元素是可输入的,也就是有自己的可变状态React中可变状态通常保存在state中,并且只能通过setState()方法来修改React将state与表单元素值value绑定到一起,由state的值来控制表单元素的值受控组件的使用步骤 1,在state 中添加一个状态,作为表单元素的value值(控制

React高阶组件--render props、高阶组件(React学习笔记_06)-爱代码爱编程

React - render props和高阶组件 1,render props模式 使用步骤 1,创建一个组件,在组件中提供复用的状态逻辑代码2,将要复用的状态作为props.render(state)方法的参数,暴露到组件外部3,使用props.render()的返回值作为要渲染的内容class 组件名 extends React.Compone

React 学习笔记-爱代码爱编程

导 1. react- 用于构建用户界面的javaScript 库 发送请求获取数据处理数据(过滤、整理)操作dom 呈现页面react 是一个将数据渲染微HTML视图的开源 JavaScript库 2. facebook开发,且开源 3. 原生JavaScript         原生javaScript操作DOM繁琐、效率低(DOM-APL

React学习笔记002-React中的事件-爱代码爱编程

在原生html中的定义一个简单事件一般是这样: <button onclick="alert('777')">按钮</button> 这是原生事件,将click事件直接绑定在button(dom)上面;而React的jsx语法采用合成事件,也就是采用事件冒泡的形式冒泡到document上面,然后React将事件封装给正式

react笔记_04jsx语法学习_乖女子@@@的博客-爱代码爱编程

目录 知识点复习[1] 什么叫做js表达式[2]什么不是表达式呢?-控制语句 jsx语法举例说明举例说明 知识点复习 [1] 什么叫做js表达式 总结成一句话:能够返回