2015-03-30 8 views
8

Ho un componente che riceve un elenco di record come supporto. Sto cercando di aggiungere una funzione a un evento onClick, ma il codice impostato per essere eseguito sull'evento click viene attivato non appena viene caricato il componente. In questo caso mi riferisco alla funzione processM. Sono nuovo di ReactJS e gradirei qualsiasi aiuto.La funzione elencata per l'evento onClick viene attivata al momento del caricamento su ReactJS

var TempJobTaskActions = React.createClass({ 
 
\t processM: function(url){ 
 

 
\t \t console.log('in processMove: ', url); 
 

 
\t \t $.ajax({ 
 
\t \t \t type: 'GET', 
 
\t \t \t url: url, 
 
\t \t \t success: function(data){ 
 
\t \t \t } 
 
\t \t }); 
 

 
\t }, 
 
\t render: function(){ 
 

 
\t \t var action = null; 
 
\t \t var downUrl = '../MoveDown?id='+this.props.tid; 
 
\t \t var upUrl = '../MoveUp?id='+this.props.tid; 
 

 
\t \t if(this.props.position == "solo"){ 
 
\t \t \t action = (<span></span>); 
 
\t \t } 
 

 
\t \t if(this.props.position == "first"){ 
 
\t \t \t action = (<span><a className='cdc-link cdc-icon glyphicon glyphicon-arrow-down' 
 
\t \t \t \t href='#' onClick={this.processM(downUrl)} title='Move Down'></a></span>); 
 
\t \t } 
 

 
\t \t if(this.props.position == "last"){ 
 
\t \t \t action = (<span><a className='cdc-link cdc-icon glyphicon glyphicon-arrow-up' 
 
\t \t \t \t href='#' onClick={this.processM(upUrl)} title='Move Up'></a></span>); 
 
\t \t } 
 

 
\t \t if(this.props.position == "middle"){ 
 
\t \t \t action = (
 
\t \t \t \t <div> 
 
\t \t \t \t \t <span><a className='cdc-link cdc-icon glyphicon glyphicon-arrow-up' 
 
\t \t \t \t \t \t href='#' onClick={this.processM(upUrl)} title='Move Up'></a></span> 
 
\t \t \t \t \t <span><a className='cdc-link cdc-icon glyphicon glyphicon-arrow-down' 
 
\t \t \t \t \t \t href='#' onClick={this.processM(downUrl)} title='Move Down'></a></span> 
 
\t \t \t \t </div> 
 
\t \t \t); 
 
\t \t } \t 
 

 
\t \t return (
 
\t \t \t <div>{action}</div> 
 
\t \t); 
 
\t } 
 
});

risposta

15

this.processM(upUrl) chiamerà la funzione. Per inviare le variabili si dovrebbe legare in questo modo invece

this.processM.bind (questo, upUrl)

Here is a good example with bind

+1

Dhiraj, questo ha funzionato magnificamente. Grazie. – chesco

+0

, oppure puoi semplicemente fare il onclick {this.processM} e impostare un attributo dati. Quindi, data-upurl = {upUrl} e all'interno della funzione prendilo con event.target.dataset.upurl – zackify

Problemi correlati