Ligação de evento OnClick em React.js

Eu gostaria de passar o ID div pai, no clique desse div ou qualquer elemento filho da mesma div . Mas eu sou incapaz de conseguir isso. Por favor, diga-me onde estou cometendo um erro. Código está abaixo:

 viewMore: function(i,j){ console.log('You clicked: ', i ); }, render : function(){ var attributeId = "groups_"; attributeId+= index; return( //parent div 
Group Name:

My Name

POC
Key Attributes:
  • POC 1
) };

Faça uma nova function usando bind .

 onClick={this.viewMore.bind(this, attributeId)} 

Como vejo este tipo de sugestões em vários lugares, também vou mover meu comentário para uma resposta adicional, para fornecer uma visão adicional:

 class TestComponent extends React.Component { constructor() { super(); this.onClick = this.handleClick.bind(this); } handleClick(event) { const {id} = event.target; console.log(id); } render() { return ( 

{this.props.name}

); } }

Isso permite:

  1. evitar ligações desnecessárias
  2. acesse o id e qualquer outra propriedade de uma maneira muito mais Reactiva.

Naturalmente, o exemplo acima assume que você recebe o id como suporte, mas também pode fazer as manipulações necessárias.

ATUALIZAÇÃO 1 – 28 de novembro de 2016

Adicionado link para CodePen dos comentários acima.

ATUALIZAÇÃO 2 – 30 de março de 2017

Como mencionado, isso não funcionaria se você usasse o React.createClass para definir seus componentes. Você não tem um construtor para fazer isso. Você pode usar outros methods de ciclo de vida, se não se importar com um pouco de feiúra.

Dito isto, é 2017. Use ES6, você faria ?!

ATUALIZAÇÃO 3 – 12 de maio de 2017

Se você estiver usando a transformação de propriedades de class , poderá simplificar ainda mais:

 class TestComponent extends React.Component { onClick = (event) => { const {id} = event.target; console.log(id); } render() { return ( 

{this.props.name}

); } }

ATUALIZAÇÃO 4 – 4 de fevereiro de 2018

Devido a melhorias de bind e friends no V8 (Chakra e tal provavelmente também), você pode estar melhor usando o this.click.bind(this) ou this.click.bind(this) -o em uma function de seta ao passar para onClick .

Por quê?

O método anterior, criado apenas por motivos de desempenho, encerrava algumas possibilidades de injetar dinamicamente funções no protótipo do componente.

NOTA 1 – 14 de abril de 2018

Tenha em mente que o método mencionado na Atualização 4 ainda introduz alguns problemas de desempenho, pois em cada passagem de render uma nova function é criada como resultado da bind . Isso, por sua vez, irá descer até o componente filho e causar re-renderizações desnecessárias, já que a function muda a cada vez.

A mesma coisa acontece quando você passa uma function de seta em linha.

Todos os outros methods, como o uso de propriedades de class, irão mexer com sua inheritance (o que você deve evitar, mas ainda assim), simplesmente porque, atualmente, Babel os transpila para funções “on-instance”, que não estão no cadeia de protótipos.

Então, é isso:

 class Person { printA = () => { console.log('a') } } 

torna-se:

 function _classCallCheck(instance, Constructor) {...abridged...} var Person = function Person() { _classCallCheck(this, Person); this.printA = function () { console.log('a'); }; }; 

Eu fiz uma resposta atualizada para o ES6 aqui: https://stackoverflow.com/a/35748912/76840

Essencialmente, você pode usar expressões de function de seta, que têm o benefício de preservar this :

 onClick={(event)=>this.viewMore(attributeId, event)} 

A partir desta edição, se você estiver usando o Babel com o estágio 2 ativado, poderá usar uma propriedade assim:

 // Within your class... viewMore = (event) => { /* ... */ } // Within render method in your JSX onClick = {this.viewMore} 

Você pode usar a function de curry .

ES5:

 viewMore(param) { // param is the argument you passed to the function return function(e) { // e is the event object that returned }; } 

ES6

 viewMore = param => e => { // param is the argument you passed to the function // e is the event object that returned }; 

E apenas use assim:

 onClick={this.viewMore("some param")} 

Aqui está uma atualização e uma visão geral das respostas anteriores:

  1. Usando onClick = {this.viewMore.bind (this, attributeId)} por @HenrikAndersson. Embora essa abordagem sirva ao propósito, ela usa a syntax de binding com a qual muitos não estão confortáveis.
  2. Usando o campo de class pública mencionado por @ZenMaster . Esta solução tem mais ou menos o mesmo desempenho, também vem com uma syntax melhor. Mas fica complicado quando temos que passar um parâmetro.

     class TestComponent extends React.Component { onClick = (event) => { const {id} = event.target; console.log(id); } render() { return ( 

    {this.props.name}

    ); } }

A abordagem mencionada acima ignora os parâmetros de passagem e, em vez disso, usa atributos personalizados para acessar os dados necessários no manipulador de cliques.

Uma solução melhor seria:

 class MyComponent extends React.Component { handleClick = (item) => (e) => { e.preventDefault() console.log(`This has access to item ${item}! and event(e)`) } render(){ const item={ id:'1', value: 'a' } return(  ) } } 

Referência: manipular events por funções de seta no aplicativo React