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);
}	
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值