15.4 React 事件(events)

事件处理是JS框架的用户交互机制

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

下面我们来练习编写一个能处理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跟踪哪些渲染节点有侦听器。事件合成系统实现自己的冒泡机制并调用适当的处理程序。