Понимание синтетических событий в 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? Ссылка на функцию VideoListhandleVideoSelected.

Это может помочь сравнить его с какой-то Сорта-подобной упрощенной 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 компоненте вы больше не дело с событиями; это простые старые вызовы функций.

Чтобы сохранить ссылку на название видео, передать каррированную версию handleVideoSelected с названием в качестве первого арг с помощью Function.prototype.bind:

{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".