了解 ReactJS 中的合成事件

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

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

要保留对视频标题的引用，请使用 Function.prototype.bind:

将标题作为第一个参数传递 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" 文档中识别各个待办事项的方式。

Answer 2

这里实际上并没有魔法，只是传递函数。 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 版本中，您通过 props.

将 handleVideoSelected 传递给 Video

了解 ReactJS 中的合成事件

Understanding synthetic events in ReactJS

javascript

events

onclick

reactjs