15.4 React 事件（events）

优质

小牛编辑

133浏览

2023-12-01

上一章节，我们已经学会如何创建组件，组件除了渲染界面内容外，还有一个重要功能，就是和用户交互，其中事件机制是交互的核心。

下面我们来练习编写一个能处理click（点击）事件的组件：

var BannerAd = React.createClass({
  onBannerClick: function(evt) {
    // codez to make the moneys
  },

  render: function() {
    // Render the div with an onClick prop (value is a function)
    return Click Me!;
  }
});

如上，通过给元素添加你想要的onXXX，然后实现组件的一个事件处理函数，就这么简单。

对于React支持的完整的事件列表，可以查阅：React官网事件文档。

我们知道，HTML标签内置的onXXX函数不是好的编程实践，但是在React中并非如此。

事件代理

我们再看一个复杂点的例子，当组件包含子组件时候的事件处理方式：

上述代码定义了一个父组件和一个子组件，给按钮子组件添加了onClick点击事件处理，调用其props的一个函数，而该函数刚好是父组件的performMagic函数。 React使用事件委托，并在应用程序的根部侦听事件。React跟踪哪些渲染节点有侦听器。事件合成系统实现自己的冒泡机制并调用适当的处理程序。