Question

我有一个组件正在接收作为道具的记录列表。我正在尝试向onClick事件添加一个函数，但是只要组件加载，就会在click事件上执行代码集。在这种情况下，我指的是processM功能。我是ReactJS的新手，我将不胜感激。

＆＃13;

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

＆＃13;

Answer 1

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

this.processM.bind（this，upUrl）

<强> Here is a good example with bind

Answer 2

尝试重写通话as an ES6 arrow function：

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

为onClick事件列出的函数在ReactJS上加载时触发

2 个答案: