Как байндить event в React?

Question

[Ленар Фаттахов]

Хочу добавить к обработчику события еще и параметр id, но оставить ссылку на event, чтобы вызывать stopPropagation().
Для этого использую bind, где передаю event и id. Но вот проблема, передается совершенно другой event, то есть вместо mouse click'a получаю input. В чем может быть проблема?

<li key={i}>
  <a href="##" onClick={this._onClick.bind(this, event, el.id)}>Какой-то текст</a>
</li>

Answer 1

[Антон Измайлов]

А зачем таким методом? Не проще ли сделать так:

constructor(props){
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
return (event, index, value) => { //Твой код}
}

Comments

[Антон Измайлов]

Но это скорее для селектов и тому подобного, если же надо в свойство onClick={this.handleClick(some)} то нужно добавить в handleClick(type) и в ретерне работать с этим

[Ленар Фаттахов]

О, здорово, то что нужно) Только недавно работаю с реактом и такие красивые решения очень кстати

[Ленар Фаттахов]

Антон Измайлов: И мне конструктор не понадобился, потому что использую createClass

[Антон]

а зачем this.handleClick.bind(this)? не проще просто сделать handleClick как arrow-function, тогда там контекст this будет доступен автоматически

[Антон Измайлов]

Антон: работает только если через React.CreateClass, в случае если пилить через Component - стрелочные функции выбивают ошибку. Вот такой вот капец.

[andreyqin]

Антон Измайлов: стрелочные функции работают, если включить поддержку ES7

[Антон Измайлов]

andreyqin: у меня подключен ES2015 который включает arrow functions, но работают они странным образом только внутри функций. Т.е. blabla() {
return () => {}
}

[andreyqin]

Антон Измайлов: я говорю именно про ES7, в котором стрелочные функции работают и внутри классов.

Answer 2

[vsuhachev]

<li key={i}>
  <a href="##" onClick={event => this._onClick(event, el.id) }>Какой-то текст</a>
</li>

А вообще лучше пользоваться refs

Answer 3

[Антон]

...

_handleClick = id => {
  return e => {
    e.stopPropagation();
    /* some actions */
  }
}
...
<a onClick={ this._handleClick(el.id) }></a>

Comments

[Антон Измайлов]

Антон: работает только если через React.CreateClass, в случае если пилить через Component - стрелочные функции выбивают ошибку. Вот такой вот капец.

[Антон]

Антон Измайлов: у меня все работает (ВНЕЗАПНО)

[Антон Измайлов]

Антон: у меня тоже работало на старом бойлере (как и декораторы), но после перехода на Babel6 перестало, я хз короч.

[Антон]

Антон Измайлов: попробуй state-0 у бабела

[Антон Измайлов]

Антон: этот функционал один бок будет скорее всего выпелен вместе с декораторами, так что не думаю что стоит привыкать к этому.

[Антон Измайлов]

Антон: Кстати проверил и нифига даже со стейдж 0 не работает

[andreyqin]

Антон: не совсем понятно откуда el взялось?

[Антон]

andreyqin: у ТСа он есть

[andreyqin]

Антон: а, ок. Там, судя по всему, кусок из цикла.