ypSharing

1、事件绑定

React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:

  • React 事件的命名采用小驼峰式,而不是纯小写。
    onClick  onChange
    
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
    onClick={this.fn}
    
  • 类组件与函数组件绑定事件是差不多的,只是在类组件中绑定事件函数的时候需要用到this,代表指向当前的类的引用,在函数中不需要调用this
    export default class extends React.Component {
        clickHandle(e){
            console.log('点了')
        }
        render(){
            return (
                <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
            )
        }
    }
    
    const Items=({title,num})=>{
        const fn=()=>{
            console.log('hggg')
        }
        return(
            <div>
                <h2>{title}</h2>
                <button onClick={fn}></button>
            </div>
        )
    }
    

2、this指向问题

  1. 直接在render里写行内的箭头函数(不推荐)
    <button onClick={(evt) => this.fun(evt)}>按钮</button>
    
  2. 直接在组件内定义一个非箭头函数的方法,然后在render里直接使用(不推荐)
    <button onClick={this.fun.bind(this)}>按钮</button>
    
  3. 在组件内使用箭头函数定义一个方法(推荐)
     <button onClick={this.fun(evt)}>按钮</button>
     // 通过箭头函数定义事件方法,也能解决this指向问题
     fn = (evt) => {
         alert(123);
     }
    
  4. 直接在组件内定义一个非箭头函数的方法,然后在constructor里bind(this)(推荐)
    constructor(props){
        super(props)
        // 在构造方法中指定this指向  <button onClick={this.fun()}>按钮</button>
        this.fun = this.fun.bind(this)
    }
    

3、事件对象

React中可以通过事件处理函数的参数获取到事件对象,它的事件对象叫做:合成事件
即兼容所有浏览器,无需担心跨浏览器兼容问题,此事件对象还拥有和浏览器原生事件相同的接口,包括 stopPropagation()和 preventDefault()
如果你想获取到原生事件对象,可以通过 e.nativeEvent 属性来进行获取

  • 获取原生事件对象:e.nativeEvent
  • 获取数值:e.target.value
export default class extends React.Component {
    clickHandle(e){
        // 获取原生事件对象
        console.log(e.nativeEvent)
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

4、事件的参数传递

  1. render里调用方法的地方外面包一层箭头函数
  2. render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
  3. 通过event传递
  4. 比较推荐的是做一个子组件, 在父组件中定义方法,通过props传递到子组件中,然后在子组件件通过this.props.method来调用

相关文章: