React事件处理

Posted 2021-11-07 遥岑.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React事件处理相关的知识，希望对你有一定的参考价值。

React事件处理

事件绑定

React事件绑定语法与DOM事件语法相似。
语法：on+事件名称={事件处理程序}，比如onClick={()=> {}}。
React事件采用驼峰命名法。

小驼峰命名：第一个单词小写，后面的单词首字母大写，事件名后不能带()，带上会直接执行

class App extends React.Component {
    handle() {
        console.log('事件触发')
    }

    render() {
        return (
            <button onClick={this.handle}>点我</button>
        )
    }
}

事件对象

可以通过事件处理程序的参数获取到事件对象。
React中的事件对象叫做：合成事件（对象）。

合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题。

class App extends React.Component {
    handle(e) {
        //组织浏览器默认行为
        e.preventDefault()
        console.log('事件触发')
    }

    render() {
        return (
            <a href='http://baidu.com' onClick={this.handle}>百度</a>
        )
    }
}

阻止默认行为的方式是，调用preventDefault方法

事件绑定this指向

this绑定问题：在用户自定义的函数中没有this。

箭头函数

利用箭头函数自身不绑定this的特点。

箭头函数中的this指向外部环境

//未绑定this 在调用时用箭头函数传值
handleClick(it) {
     console.log(it)
}

render() {
    return (
        this.state.list.map((item) => {
            //箭头函数传值 箭头函数中的this指向外部环境 也就是render()
            return <button onClick={()=>this.handleClick(item.id)} key={item.id}>{item.name}</button>
        })
    )
}

render( )方法中的this为组件实例

bind()绑定

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起。

handleClick(it) {
    console.log(it)
}

render() {
    return (
        this.state.list.map((item) => {
            //bind绑定传值
            //或者在constructor里this.handleClick = this.handleClick.bind(this)
            return <button key={item.id} onClick={this.handleClick.bind(this,item.id)}>{item.name}</button>
        })
    )
}

class的实例方法

//使用箭头函数，不绑定this
handleClick = ()=> {
    console.log('7')
}

render() {
   return (
       this.state.list.map((item) => {
           return <button onClick={this.handleClick} key={item.id}>{item.name}</button>
       })
   )
}

事件处理中的参数传递

直接传递参数：

在render中通过箭头函数传递

<button key={item.id} onClick={ ()=> this.handleClick(item.id)}>{ item.name }</button>

在render中通过bind函数传递

<button key={item.id} onClick={ ()=> this.handleClick.bind(this,item.id)}>{ item.name }</button>

使用data属性：
在标签中以data-开头的属性为用户自定义属性，在方法中获取自定义属性的值的方法是

<button key={item.id} data-id={item.id} onClick={ this.handleClick }>{item.name}</button>
		 
handleClick = (e)=> { //'e'表示触发事件的对象
     console.log("ID：",e.target.dataset.id);
}