【React】 6课 react组件内点击事件的this的3种指向方法

最新推荐文章于 2023-10-31 14:34:24 发布

舜岳

最新推荐文章于 2023-10-31 14:34:24 发布

阅读量1.3k

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_41614928/article/details/94118148

版权

React 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

react组件内点击事件的this的3种指向方法

1. 通过bind改变点击事件内的this指向外部组件内this

onClick={this.handleClick1.bind( this )}

2. 通过在构造函数constructor内使用bind对函数内的this重定向

this.handleClick2 = this.handleClick2.bind(this)

2. 通过使用箭头函数来指向外部组件内this （使用较多）

handleClick3 =()=>{
console.log( this )
}

演示代码如下：

首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件

npm init -y
npm i babel-standalone -D
npm i react react-dom -D

安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始编写下面代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <!-- 所有的页面代码都是放在这里面 -->
  <div id="app"></div>
  <!-- 用于解析jsx的代码 babel引用应在前面 -->
  <script src="./node_modules/babel-standalone/babel.js"></script>
  <!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
  <script src='./node_modules/react-dom/umd/react-dom.development.js'></script>

  <!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
  <script type='text/babel'>


    //react真正的组件：
    class Head extends React.Component{
      constructor(){
        console.log(arguments)  //arguments里面是传入到组件Head内的数据
        super(...arguments)     //把父级所有的样式解构出来
        //super(内没解构时)打印出undefined值是因为是组件继承了父级的样式，但本身不存在此样式；
        console.log(this.props)
        // React 把组件看成是一个状态机（State Machines） this.state内专门托管传递到组件内的数据
        //this.props里面就是接受传递到组件内的数据
        this.state = {
            data:this.props.text
        }
        console.log( this )  //构造函数里面的this指实例化对象;
        //这里直接把 点击事件2 handleClick2 的this指向更改成组件的this；相当于重写；
        this.handleClick2 = this.handleClick2.bind(this)
      }

      //以下是点击事件的各种this指向 目的是让它们指向组件内的this而不是点击的标签this
      //handleClick0没有更改this指向 所以this为undefined
      handleClick0(){
        console.log(this) //这里的this指向this.handleClick0，所以会报undefined
      }
      
      //第一种方法：使用预传参的方法，改变this的改变；
      handleClick1(){
        console.log( '这是点击事件1' )
        console.log( this )
      }

      //handleClick2的this指向通过bind改变this指向组件的this
      handleClick2(){
        console.log( '这是点击事件2' )
        console.log( this )
      }

      //第三种：使用箭头函数来指向外部this
      handleClick3 =()=>{
        console.log( '这是点击事件3' )
        console.log( this )  //这里的this指向this.handleClick1，所以会报undefined
        this.setState({     //点击后将this.state的值修改 操作VM DOM发现值修改重新渲染页面
            data:'已经改变的值'
        })
      }

      //这里面因为是 handleClick~ 方法是在原例化对应里面的原型上，所以需要在调用的时候写this.handleClick~
      render(){
        return (
          <div>
            <header onClick={this.handleClick0}> {this.state.data && this.state.data } </header>
            <header onClick={this.handleClick1.bind( this )}> {this.state.data && this.state.data } </header>
            <header onClick={this.handleClick2}> {this.state.data && this.state.data } </header>
            <header onClick={this.handleClick3}> {this.state.data && this.state.data } </header>
          </div>
        )
      }
    }
    
    //将Head组件添加到element内 text内将数据传递给Head组件
    let element = (
      <div>
        <Head text='这是后台请求过来的数据'></Head>
      </div>
    )

    ReactDOM.render(
      element,
      document.getElementById('app')
    )

  </script>
</body>
</html>

运行效果如下：

在这里插入图片描述

点击事件3后

在这里插入图片描述

舜岳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【React】 6课 react组件内点击事件的this的3种指向方法

react组件内点击事件的this的3种指向方法1. 通过bind改变点击事件内的this指向外部组件内thisonClick={this.handleClick1.bind( this )}2. 通过在构造函数constructor内使用bind对函数内的this重定向this.handleClick2 = this.handleClick2.bind(this)2. 通过使用...
复制链接

扫一扫