react事件处理

本文围绕React事件处理展开,介绍了事件绑定方式,采用on+事件名的驼峰形式,是合成事件。阐述了事件handler的不同写法及推荐方式,还说明了Event对象是React内部构建,有常用方法。最后讲解了事件参数传递的几种途径,推荐使用子组件通过props调用方法。

react事件处理

事件绑定

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

事件handler的写法

  • 直接在render里写行内的箭头函数(不推荐)
  • 在组件内使用箭头函数定义一个方法(推荐)
  • 直接在组件内定义一个非箭头函数的方法,然后在render里直接使用onClick={this.handleClick.bind(this)}(不推荐)
  • 直接在组件内定义一个非箭头函数的方法,然后在constructor里bind(this)(推荐)

Event 对象

和普通浏览器一样,事件handler会被自动传入一个 event 对象,这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的,而是它自己内部所构建的。它同样具有event.stopPropagation、event.preventDefault 这种常用的方法

事件的参数传递

  • 在render里调用方法的地方外面包一层箭头函数
  • 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
  • 通过event传递
  • 比较推荐的是做一个子组件, 在父组件中定义方法,通过props传递到子组件中,然后在子组件件通过this.props.method来调用
	import React , { Component,Fragment } from 'react'
	
	class Home extends  Component {
	  inputHander = ( e ) => {
	    if( e.keyCode === 13 ){
	      console.log( e.target.value )
	      e.target.value = '请输入'
	    }
	  }
	  render () {
	    console.log( 'home', this )
	    return (
	      <Fragment>
	        <input  onKeyUp= { this.inputHander } defaultValue = '请输入:'/>
	        <button onClick = { () => { this.props.fn( 10,20 ) } }> home- 事件 - 由父组件传递过来的 </button>
	      </Fragment>
	    )
	  }
	}

export default Home 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值