React类组件中事件绑定this指向的三种方式

简介: React类组件中事件绑定this指向的三种方式

有状态组件和无状态组件

函数组件又叫做无状态组件,类组件又叫做有状态组件。
状态又叫做数据
函数组件没有自己的状态,只负责静态页面的展示。
我们可以理解为纯ui展示。()
类组件有自己的状态,扶着更新UI,会让页面动起来.

state的基本使用

state就是数据,是组件内部的私有数据。
只能够在组件内部使用。
state的值是一个对象,表示一个组件中可以有多个数据。

设置值state使用this.setState

语法:this.setState({ count:新值 })
只会更改state中count的值。
并不会将state中其他值进行初始化。
千万不要直接更改state中的值。这是错误的。
必须通过 this.setState
this.state.count=10 直接更改错误的
那么state的两个作用:1修改state中的值. 2更新ui
import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component { 
    // 简化语法初始化state(推荐)
    // state = {
    //     count:0
    // }
    // 另外一种
    constructor() { 
        super()
        this.state = {
            count:0
        }
    }
    // 点击事件
    render() { 
        return (
            <div>
                {/* 注意这里不要写成 {this.state} 否者会报错 */}
                <span>计数值 {this.state.count}</span>
                <button onClick={() => {
                    //如果这里的代码很多怎么抽离出来呢??
                    this.setState({
                        count:this.state.count+1
                    })
                }}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

如何将事件中的代码抽取出来 (第一种:箭头函数中的this)

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component {
  state = {
    count:100
  }
  onIncrement() { 
    this.setState({
      count:this.state.count+10
    })
  }
    // 点击事件
    <!-- 第一种:箭头函数中的this,利用箭头函数中自身不绑定this的特点 -->
    render() { 
        return (
            <div>
                <span>计数值 {this.state.count}</span>
                {/* 箭头函数中的this指向外部环境,此处为render()里面的方法。
                而render中的方法就是组件中的实例 */}
                <button onClick={()=>this.onIncrement()}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

Function.protype.bind()改变this的指向 (第二种)

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component { 
    state = {
        count:100
    }
    <!-- 点击按钮的时候肯定是先执行的constructor -->
  constructor() { 
    super() 
    this.state = {
      count:0
    }
    this.onIncrement=this.onIncrement.bind(this)
  }
  // 事件处理程序
  onIncrement() { 
    this.setState({
      count:this.state.count+10
    })
  }
    // 点击事件
    render() { 
        return (
            <div>
                {/* 注意这里不要写成 {this.state} 否者会报错 */}
        <span>计数值 {this.state.count}</span>
                <button onClick={this.onIncrement}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

第三种 (推荐使用)

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component { 
  state = {
    count:0,
  }
  // 事件处理程序
  onIncrement=() =>{ 
    this.setState({
      count:this.state.count+10
    })
  }
    // 点击事件
    render() { 
        return (
            <div>
                {/* 注意这里不要写成 {this.state} 否者会报错 */}
        <span>计数值 {this.state.count}</span>
                <button onClick={this.onIncrement}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
2月前
|
前端开发
React查询、搜索类功能的实现
React查询、搜索类功能的实现
17 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
15 1
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
21 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
74 1
|
3月前
|
资源调度 前端开发 JavaScript
React组件
React组件
41 0
|
3月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
3月前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
|
3月前
|
存储 前端开发 JavaScript
React组件中如何通讯
React组件中如何通讯
16 0