此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第七篇，主要介绍react中的事件处理。

事件处理

（1）通过onXxx属性指定事件处理函数（注意大小写）

1.react使用的是自定义(合成)事件，而不是使用原生dom事件，为了兼容性

在原生js中，我们添加一个点击事件，是元素.onclick。但在react中略有不同，使用的是onClick，react中的事件处理函数与元素js都不一样，就是on后那个字母必须大写。onClick是react对onclick的二次封装，是与原生js语法进行区分，也是为了更好的兼容性。

2.react中的事件是通过事件委托方式处理的（委托给组件最外层的元素）,为了高效

我们还记得JavaScript中的事件委托吧，react的事件处理就是利用了这个事件委托。假如有一对ul标签，ul中有很多的li标签，我们给li添加事件处理的时候，比如说点击事件，我们会给那么多li标签一个一个的加点击事件吗？当然不会，我们直接给外侧的ul添加点击事件，点击li的时候通过事件冒泡，冒泡到ul，触发点击事件，达到我们想要的结果，实现了高效。

先看代码：

render() {
     return (//构建虚拟dom
         <div>
             <input ref={this.myRef} type="text" placeholder="点击按钮提示内容" />
             <button onClick={this.showInfo}>点我提示输入的数据</button>
             <input ref={this.myRef2} onBlur={this.showInfo2} type="text" placeholder="失去焦点提示内容" />
         </div>
     )
}

实际上react将input上的事件，加给了最外层的div，与ul和li相同。

（2）通过event.target得到发生事件的dom元素对象

首先在，react的官方文档，介绍Refs时，官网上说：勿过度使用Refs。请看上个学习笔记的案例，我们尝试省略一个ref。在案例中我们写了一个： onBlur是失去焦点事件。

相应的事件方法：

showInfo2 = () => {
    alert(this.myRef2.current.value)
}

这此input内我们有ref，有onBlur事件，我们给input以ref标识，在实例内写的showInfo2方法再通过ref标识来实现事件。

现在我们可以省略ref，直接写事件函数，完成事件。代码如下：

事件方法如下：

showInfo2 = (event) => {
    alert(event.target.value)
}

我们省略了ref，改写了事件方法。事件方法内传入了一个参数event，这个参数是事件方法自动传入的，就是添加了事件的这个标签。所以可以在事件方法里面直接对标签进行操作。event.taget就是这个dom元素对象。所以我们 alert(event.target.value) 就可以直接显示出input框内的值。

可见，我们虽然省略了ref，但仍然可以实现我们相要的效果。所以说，绑定事件的，发生事件的那个元素，可以去省略ref，但仍然完成对这个元素的操作。

React学习笔记七-事件处理

事件处理

猜你喜欢