理解ReactJS中的合成事件

Question

我需要一些帮助来理解ReactJS中所谓的合成事件。我编写了以下玩具程序，其中包含Video组件和VideoList组件。当显示的视频列表中的视频被单击时，我会打印出在控制台中单击的视频。

我不明白事件onVideoSelected()是如何定义的。它是否被呈现的onClick() Video组件中的事件所替代？

谢谢!

var Video = React.createClass({
  handleClick: function() {
    this.props.onVideoSelected(this.props.title);
  },

  render: function() {
    return <li><div onClick={this.handleClick} className="bg-success">{this.props.title}</div></li>;
  }

});

var VideoList = React.createClass({

  propTypes: {
    data: React.PropTypes.array.isRequired
  },

  handleVideoSelected: function(title) {
    console.log('selected Video title is: ' + title);
  },

  render: function() {

    return (
      <div className="panel panel-default"><div className="panel-heading">List of Videos</div><ul>

        {data.map(function (v) {
          return <Video onVideoSelected={this.handleVideoSelected} key={v.title} title={v.title} />;
        },this)}

        </ul></div>
    );
  }
});

var data = [
  {title: 'video title 1', link: 'http://www.youtube.com/1'},
  {title: 'video title 2', link: 'http://www.youtube.com/2'},
  {title: 'video title 3', link: 'http://www.youtube.com/3'}
];

React.render(<VideoList data={data} />, document.getElementById('videolist'));

Answer 1

实际上这里没有魔法，只是传递函数。onVideoSelected是通过属性传递到Video组件的函数引用；换句话说，流程如下：

• 单击div会发生什么情况？打给this.handleClick。
• 当你打电话给handleClick时会发生什么？打给this.props.onVideoSelected。
• onVideoSelected是如何定义的？它被传递到组件中，就像任何其他属性一样。
• 向onVideoSelected属性传递了什么？对VideoList的handleVideoSelected函数的引用。

它可能有助于将其与某些类似的、简化的jQuery代码进行比较：

function handleVideoSelected(title) {
  console.log('selected Video title is: ' + title);
}

function createVideoDiv(onVideoSelected, title) {
  var div = $("<div className="bg-success"></div>").text(title).appendTo(...);
  div.on("click", function() {
    // call the function that was passed to us
    onVideoSelected(title);
  });
}

$.each(videos, function(idx, video) {
  createVideoDiv(handleVideoSelected, video.title);
});

在jQuery版本中，您将handleVideoSelected传递给createVideoDiv；类似地，在React版本中，您通过道具将handleVideoSelected传递给Video。