javascript - 了解ReactJS中的综合事件

我需要一些帮助来理解ReactJS中的所谓综合事件。我编写了以下玩具程序，该程序具有Video组件和VideoList组件。单击渲染的视频列表中的视频时，我将打印出在控制台中单击了哪些视频。

我不了解如何定义onVideoSelected()事件。是否在呈现的Video组件中将其替换为 onClick()事件？

谢谢!

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'));

最佳答案

实际上，这里没有魔术，只是传递函数。 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版本中，您通过 Prop 将handleVideoSelected传递到Video中。