React.js

Question

有功能

changeSong: function(index) {
    this.setState({currentSongIndex: index };
}

我需要运行changeSong函数，通过单击我的div

将index作为参数传递

var listTemp = data.map(function(item,index) {

        var listTemp = data.map(function(item,index) {

        return (
            <div key={index} className="eachTrack" onClick={this.changeSong({index})}>
                <span className="duration">{item.duration}</span>
                <a href="#" className="songTemplate" >{item.artist} - {item.track}</a>

            </div>  
        )
    }.bind(this))

它只运行我的changeSong函数3次（尽管我有div元素）。现在它只是在没有通过＆＃34; index＆＃34;争论，点击也没有事件。

Answer 1

你需要绑定这个：

var listTemp = data.map(function(item,index) {
  return (
            <div key={index} className="eachTrack" onClick={this.changeSong({index})}>
                <span className="duration">{item.duration}</span>
                <a href="#" className="songTemplate" >{item.artist} - {item.track}</a>

            </div>  
        )
    }.bind(this))

或将此传递给地图功能：

var listTemp = data.map(function(item,index) {
  return (
            <div key={index} className="eachTrack" onClick={this.changeSong({index})}>
                <span className="duration">{item.duration}</span>
                <a href="#" className="songTemplate" >{item.artist} - {item.track}</a>

            </div>  
        )
    }, this)

正如其他人所说，您可能希望将changeSong函数包装在箭头函数中，以便在渲染时不立即执行：

<div key={index} className="eachTrack" onClick={() => this.changeSong(index)}>

Answer 2

您应该使用this绑定.bind(...)的上下文，或者将上下文参数提供给.map(...)。还要确保提供适当的函数作为事件处理程序。特别是，将处理程序包装在箭头函数中，以便在事件发送时正确传递index

<div key={index} className="eachTrack" onClick={() => this.changeSong(index)}>

Answer 3

使用普通ES5 Javascript时，您需要将this显式绑定到函数。幸运的是，Array.prototype.map为this上下文提供了第二个参数。

var listTemp = data.map(function(item,index) {

        return (
            <div key={index} className="eachTrack" onClick={this.changeSong({index})}>
                <span className="duration">{item.duration}</span>
                <a href="#" className="songTemplate" >{item.artist} - {item.track}</a>

            </div>  
        )
    }, this); // Passes in the parent `this` context to the map callback function