组件的事件

绑定事件

采用on+事件名的方式绑定一个事件，注意：这里和原生的事件是有区别的，原生的事件全是小写onclick，React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。 通过this访问

import React from 'react'
export default class App extends React.Component{
    // class中直接书写事件处理函数
    fn=()=>{
        alert('被点击了')
    }
    render(){
        return(
            <div>
                <button onClick={this.fn}> 点击 </button>
            </div>
        )
    }
}
// 传参写法
// react中传参时需要加一层箭头函数
fn=(n)=>{
    alert(n)
}
<button onClick={()=>{this.fn(10)}}> 点击 </button>

• react-合成事件

事件绑定在了虚拟DOM上
底层原理是事件委托
react17版本是委托给了容器[root]
react17版本之前委托给了document

事件对象 - 键盘事件
回车时弹出input的value值

import React from 'react'
export default class App extends React.Component{
    // class中直接书写事件处理函数
    getVal=(e)=>{
        if(e.keyCode===13)alert(e.target.value)
    }
    render(){
        return(
            <div>
                <input type='text' placeholder='请输入...' onKeyDown={this.getVal} />
            </div>
        )
    }
}

普通函数 - 事件this丢失的情况
以上两个案例中事件处理函数都是写成箭头函数的形式，当事件处理函数是普通函数时this会丢失，DOM身上的事件事件处理函数指向绑定事件的DOM，此时是虚拟DOM所以this指向undefined。即事件源是虚拟DOM。解决方案：bind
原因：
React组件是使用JSX编写，所有的JSX代码会通过Babe转意，babel编译后会开启严格模式，严格模式下函数this指向undefined

// 1、调用函数时绑定bind
<button onClick={this.Fn.bind(this)}>点击</button>
// 2、构造函数中绑定
import React from 'react'
export default class App extends React.Component{
    // class中直接书写事件处理函数
    fn(){
        console.log('普通函数',this)
    }
    constructor(){
        super()
        this.fn=this.fn.bind(this)
    }
    render(){
        return(
            <div>
                <button onClick={this.fn}>点击</button>
            </div>
        )
    }
}

问题⬇️

import React from 'react'
export default class App extends React.Component{
    // class中直接书写事件处理函数
    fn=()=>{
        console.log('箭头函数',this.Fn)
    }
    Fn(){
        console.log('普通函数',this.Fn)
    }
    render(){
        console.log(this.Fn)
        return(
            <div>
                <button onClick={this.fn}>点击</button>
                <button onClick={this.Fn()}>点击</button>
            </div>
        )
    }
}

原生事件

原生事件指绑定在真实DOM上的事件
使用componentDidMount()生命周期钩子函数

import React from 'react'
export default class App extends React.Component{
   componentDidMount(){ // 后于render执行
       const btn =document.querySelector('button')
       btn.onclick=function(){
           alert('原生事件')
       }
   }
    render(){ // 先于componentDidMount执行
        return(
            <div>
                <button>点击</button>
            </div>
        )
    }
}

componentDidMount() 和vue中的mounted功能一致