ReactJS中onClick事件列出的函数在加载时触发。

Question

我有一个组件，接收一个记录列表作为prop。我尝试在onClick事件中添加一个函数，但是设置为执行点击事件的代码会在组件加载时立即触发。在这种情况下，我指的是processM函数。我是ReactJS的新手，希望得到任何帮助。

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

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

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

 },
 render: function(){

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

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

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

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

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

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

- chesco

Answer 1

this.processM(upUrl)将调用该函数。如果要发送变量，您应该像这样绑定：

this.processM.bind(this, upUrl)

这里有一个好的绑定示例

- Dhiraj

---

那么，或者你可以只需将onclick {this.processM}和设置数据属性。所以，data-upurl={upUrl}并在函数内部使用 event.target.dataset.upurl 抓取它。 - zackify

Answer 2

尝试将调用改写为ES6箭头函数:

onClick={() => {
  this.processM(downUrl);
}}

- brogrammer