Question

我需要一些帮助来理解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'));

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。

Answer 2

在onClick组件中调用Video处理程序后，您不再处理事件;这些都是普通的旧函数调用。

要保留对视频标题的引用，请使用Function.prototype.bind传递标题为第一个arg的handleVideoSelected的咖喱版本：

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

（我还将this.props添加到data。看起来像是代码中的拼写错误。）

这就是在"Expose Component Functions" doc。

中识别个别Todos的方式

了解ReactJS中的合成事件

2 个答案: