React4.事件处理与类组件状态

Posted 2022-05-17 阿拉的梦想

【React】4.事件处理与类组件状态

• 1. 事件处理
• • 1.1 事件绑定
  • 1.2.事件对象
• 2. 组件状态
• 3. 事件绑定this指向
• • 3.1 使用箭头函数绑定
  • 3.2 在构造器中使用bind方法绑定

1. 事件处理

所谓事件， 就是点击事件、双击事件等等；

1.1 事件绑定

React 事件綁定语法与 DOM 事件语法相似
语法： on+事件名称=事件处理程序，比如：onClick=()=>
注意： React 事件采用驼蜂命名法，比如：onMouseEnter、onFocus

在类组件中绑定事件：

import React from 'react'


/**
 * 定义一个类组件
 */
 class Fun3 extends React.Component 
    类中定义一个函数处理器
     clickHandler() 
        console.log("hello")
    

    render() 
      return (
          //绑定单击事件,必须使用this
        <button onClick=this.clickHandler>click me</button>
      )
    
  

  //导出组件，以供使用
  export default Fun3

在函数中绑定事件:

import  render  from '@testing-library/react'
import React from 'react'
import ReactDOM from 'react-dom/client'

//导入组件
import Fun3 from './common/Fun3'

const root = ReactDOM.createRoot(document.getElementById("root"))


function Fun4()

  //事件处理函数
  function clickMe()
    console.log("hello 4")
  

  return (
    //绑定事件，无需this
    <button onClick=clickMe>click me 4 </button>
  )




//使用组件,用标签符号来调用组件
root.render(<Fun4 />)

1.2.事件对象

• 可以通过事件处理程序的参数获取到事件对象
• React 中的事件对象叫做：合成事件（对象）
• 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

示例：
使用事件对象e，实现点击a标签时阻止跳转

import React from 'react'
import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById("root"))


function Fun4()

  //事件处理函数
  function clickMe(e)
    console.log("hello 4")
    //阻止浏览器的默认行为，这样只会打印，不会跳转了
    e.preventDefault();
  

  return (
    //绑定事件
    <a href='http://www.baidu.com' onClick=clickMe> baidu </a>
  )




//使用组件,用标签符号来调用组件
root.render(<Fun4 />)

2. 组件状态

函数组件没有状态，类组件才有状态。

状态关键字为state,是一个对象，里面可以是任意数据

初始化状态：

state =
	count:0,name:"tom"

使用状态：

this.state.count

设置状态：
只能用setState()更新状态，this.state.count=2是无效的。
只会更改指定key的值，不会影响state中的其他数据。

this.setState(count:1)

数据驱动视图，当state变化后，会重新渲染页面。

示例：
用状态保存计数，每次点击+1

Fun3.js

import React from 'react'


/**
 * 定义一个类组件
 */
class Fun3 extends React.Component 
  //初始化state
  state = 
    count: 0
  


  //必须使用箭头函数才能操作state，否则报错
  clickHandler = (e) => 
    this.setState( count: this.state.count + 1 )
    console.log(this.state.count)
  

  render() 
    return (
      //绑定单击事件,必须使用this
      <button onClick=this.clickHandler>click me this.state.count</button>
    )
  


//导出组件，以供使用
export default Fun3

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import Fun3 from './common/Fun3'


const root = ReactDOM.createRoot(document.getElementById("root"))
//使用组件,用标签符号来调用组件
root.render(<Fun3 />)

效果：

3. 事件绑定this指向

当我们直接在函数里面使用this时，可能发生
报错：Cannot read properties of undefined (reading ‘state’)

3.1 使用箭头函数绑定

下面介绍了三种箭头函数解决this的方式：

import React from 'react'


/**
 * 定义一个类组件
 */
class Fun3 extends React.Component 
  //初始化state
  state = 
    count: 0
  


  //解决方式1（推荐）
  clickHandler = (e) => 
    this.setState( count: this.state.count + 1 )
    console.log(this.state.count)
  
  //解决方式2
  clickHandler2() 
    this.setState( count: this.state.count + 1 )
    console.log(this.state.count)
  

  render() 
    return (
      //调用方式1
      //<button onClick=this.clickHandler>click me this.state.count</button>
      //调用方式2
      //<button onClick=() => this.clickHandler2()>click me this.state.count</button>
      //解决方式3
      <button onClick=() => this.setState( count: this.state.count + 1 )>click me this.state.count</button>
    )
  


//导出组件，以供使用
export default Fun3

3.2 在构造器中使用bind方法绑定

import React from 'react'


/**
 * 定义一个类组件
 */
class Fun3 extends React.Component 

  constructor()
    super()
    //给函数绑定this
    this.clickHandler=this.clickHandler.bind(this)
  

  //初始化state
  state = 
    count: 0
  


  //解决方式2
  clickHandler() 
    this.setState( count: this.state.count + 1 )
    console.log(this.state.count)
  

  render() 
    return (
      <button onClick=this.clickHandler>click me this.state.count</button>
    )
  


//导出组件，以供使用
export default Fun3