Это ключевое слово в React.js

Там же функцияЭто ключевое слово в React.js

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

мне нужно запустить changeSong функция прохождения индекса в качестве аргумента, нажав на мой DIV

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). Теперь он просто работает, даже не передавая аргумент «index», также нет события по клику.

источник

2016-07-22 congressor

Может быть, вы забыли привязать нужный контекст для обработчика событий? Кроме того, функция «changeSong» выполняется сразу после визуализации, поэтому, если она сама не возвращает функцию, это также приведет к проблемам. Просто оберните его в функцию стрелки. – oens

Я считаю, что @oens находится на правильном пути. Просто заметил его комментарий после отправки ответа, но он может проиллюстрировать то, о чем он говорит. – abigwonderful

Вы должны связывать это:

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)}>

источник

2016-07-22 21:02:34 abigwonderful

большое спасибо! теперь он почти работает сейчас)) Когда страница готова changeSong завершается три раза (столько, сколько у меня есть элементы div), но когда я нажимаю на нее, ничего не происходит. Это просто функция console.log(). Что я могу сделать неправильно? – congressor

@congressor hmm its трудный ответить, не видя остальную часть вашего кода – abigwonderful

Получил это. Он просто запускает мою функцию changeSong 3 раза, но мне нужно, чтобы она запускалась по событию click с аргументом index, поэтому она вызывает changeSong: function (index) {this.setState ({currentSongIndex: index} Как я могу это сделать? – congressor

При использовании простого 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

источник

2016-07-22 21:04:08 CaptEmulation

гораздо лучшее описание и пример, чем мой ответ! – abigwonderful

Или вы можете использовать функцию стрелки, которая не имеет контекста ... arr.map ((item, index) => {...}) – Skay

спасибо очень понравилось! Я очень ценю вашу помощь! – congressor

Вы должны связать контекст this с использованием .bind(...) или путем подачи контекста аргумент .map(...). Также убедитесь, что вы выполняете надлежащую функцию в качестве обработчика событий. В частности, обернуть обработчик в функции стрелки, чтобы правильно передать index После отправки события,

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

источник

2016-07-22 21:08:00 oens

большое спасибо! Я очень ценю вашу помощь! – congressor

Это ключевое слово в React.js

ответ

Смежные вопросы