上节课我们对react组件的三大属性做了一个回顾，这节课我们就继续往下学习了。今天我们来学习有关react中的事件处理的相关课程。

事件处理概述

  • 通过onXxx属性来指定事件处理函数（严格注意大小写）
  • react使用的是自定义事件，而不是原生DOM事件
  • react中的事件是通过事件委托方式处理的
  • 通过event.target得到发生事件的DOM元素对象

我们来分析一下上面这几句是什么意思：

第一个我们都知道，我们的原生DOM用得是不是onclick啊？而react中用得是onClick，但是为什么要这样呢？那原因就在下面。react使用的是自定义（合成）事件，而不是原生DOM事件。但是react为什么要来做这种事儿呢？其实这是为了更好的兼容性。

react中的事件是通过事件委托方式处理的。我们所有的onXxx事件其实都委托给了组件的最外层元素，你看我们之前的代码：

class Demo extends React.Component {
  myRef=React.createRef();
  showData = () => alert(this.myRef.current.value);
  render() {
    return(
      <div>
        <input ref={this.myRef} type="text" placeholder="click"/>
        <button onClick={this.showData} type="button">Click</button>
      </div>
    );
  }
}

我们给button标签加的onClick实际上都是加给了最外面这个<div>。但是react为什么要这么做呢？大家还记不记得事件委托的原理是什么？是不是事件冒泡？比如我们有一个<ul>，里面有很多的<li>，现在我们要给每一个<li>都加点击事件，那我们会一个一个去加吗？我们肯定是加给<ul>。然后即便点击的是每个<li>，那么冒泡的话是会冒泡到<ul>上的。那么为什么这么做呢？因为这样做是很高效的。

这就是react的设计

我们再来看这一句：通过event.target得到发生事件的DOM元素对象。但是我们原生js里面是不是也可以？原生js里叫做发生事件的事件元。但是我们用这个干吗呢？我们回想一下学习refs的时候，官方说过这么一段话：

image-20211223145601977

就是说你不要动不动就写一个ref，有些时候ref是可以省略的。有人说了我们目前学习中用到的案例好像没有哪个ref是可以省略的啊。那么我们来看一下：

class Demo extends React.Component {
  ...
  showData2 = (e) => alert(e.target.value);
  render() {
    return(
      <div>
        ...
        <input onBlur={this.showData2} type="text" placeholder="lose focus"/>
      </div>
    );
  }
}

大家看我上面那段代码，我是不是吧ref省略了？为什么？我们这个事件发生事件的DOM元素和我们要操作的DOM元素是不是同一个啊？那这个ref就可以省略。

你看当我们这个<input>失去焦点的时候，react是不是会去调showData2？其实当调showData2的时候会把事件元传（事件对象）进去，只不过我之前一直都没有接收过。现在我们来接收一下，那么我们也说了要通过event.target来拿到DOM元素然后再获取value。那么我们来看一下效果：

image-20211223150736999

大家看，我们去掉了这个ref也一样成功拿到了我们想要的结果。所以说以后如果发生事件的DOM元素和要操作的DOM元素是同一个时就直接省略掉ref。

啃又有人要问，那我的那个onClick事件能不能也把ref省略掉呢？以我们目前的学习和水平，还不行。如果后期到了某个程度，可能我们可以再回头看这个问题。

总结

  • 不要过度使用ref
  • 事件监听要严格注意大小写
  • 通过event.target获取到事件发生的DOM元素

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/react_event/