react之事件处理

Posted 2021-10-12 久宇诗

tags:

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

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指向问题

直接在render里写行内的箭头函数(不推荐)

<button onClick={(evt) => this.fun(evt)}>按钮</button>

直接在组件内定义一个非箭头函数的方法，然后在render里直接使用(不推荐)
```
<button onClick={this.fun.bind(this)}>按钮</button>
```

在组件内使用箭头函数定义一个方法(推荐)

 <button onClick={this.fun(evt)}>按钮</button>
 // 通过箭头函数定义事件方法，也能解决this指向问题
 fn = (evt) => {
     alert(123);
 }

直接在组件内定义一个非箭头函数的方法，然后在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、事件的参数传递

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

React之事件处理

在react中，事件处理的写法和处理方式可能会和vue以及传统html有些不同。

一、事件名和默认行为阻止

事件名采用驼峰写法，并且方法名用大括号引入，而不是双引号：

<button onClick={activateLasers}>
  Activate Lasers
</button>

对于类似a标签的默认跳转事件：

handleClick(e) {
    e.preventDefault();
    console.log(‘The link was clicked.‘);
}
return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
);

二、绑定事件

技术图片