react jsx事件获取event对象

文章目录
文章参考
一、使用bind函数获取event对象
二、 箭头函数获取event对象
三、使用高阶函数获取event对象
文章参考
React学习–JSX与react事件
下面我根据使用难易的顺序做了下面三个例子

一、使用bind函数获取event对象
react事件参数的传递通过绑定来实现,在传递时,绑定的this在前,参数在后,在定义函数时,事件对象e要放在最后

/**
 * 删除列表中选中的行
 * @param index 数组的索引
 * @param e Event对象,使用bind方式绑定函数,event对象作为最后一个参数注入
 */
deleteCurrentItem(index, e){
	// 删除数组中选中的索引数据
	this.state.data.splice(index, 1);
	this.setState({
		data : that.state.data
	})
}

render(){
	let that = this;
	// 顶部右侧按钮,实现页面切换
	let typeInBtn = <Link to={ "/inWarehouse/inWarehouseInput" }>录入</Link>
	let listContent = this.state.data.map(function(obj, index, currentArray){
		return (
			<div key={obj} style={{"background": "#fff"}} onClick={that.deleteCurrentItem.bind(that,index)}>
				<img src='src/assets/yay.jpg' style={that.imageStyle}/>
				<div style={{"marginLeft": "100px"}}>
					<div style={{"fontSize":"16px","lineHeight":"1.8"}}>黄瓜薯片----{obj}</div>
					<div style={{"lineHeight":"1.8"}}>售价:8 元</div>
					<div style={{"clear": "both"}}></div>
				</div>
			</div>
		)
	});
	return (
		<div>{listContent}</div>
	)
}


二、 箭头函数获取event对象

class MyIndex extends BaseComponent {

    testEvent(params,eventObj){
	    console.log(params);
	    console.dir(eventObj);
    }
    
	render () {
        return (
            <div>
                <Button onClick={(e)=>this.testEvent("params",e)}>绑定事件测试</Button>
            </div>
        );
	}
}


三、使用高阶函数获取event对象
// 通过高阶函数返回定义的事件,高阶函数获取变量参数,在返回函数中获取事件对象
 

// 通过高阶函数返回定义的事件,高阶函数获取变量参数,在返回函数中获取事件对象
jsxDeleteGoodsByIdByPost(goodsId, index){
	let that = this;
	// eventObj是Event对象,在JSX中
	return function(eventObj){
		that.state.goodsList.splice(index, 1);
		that.setState({
			goodsList : that.state.goodsList
		})
		GoodsService.deleteGoodsByIdByPost(goodsId)
			.then(function(res){
				if(res.data == "sucess"){
					Toast.success('删除成功 !!!', 1);
				}
			});
	}
}
<SwipeAction key={currentObj + index}
	style={{ backgroundColor: 'gray' }}
	autoClose
	right={[
		{
			text: '删除',
			onPress: this.jsxDeleteGoodsByIdByPost(currentObj.goodsId, index),
			style: { backgroundColor: '#F4333C', color: 'white' },
		}
	]}
>

	<Link to={"/goodsManage/goodsDetailsUpdate/"+currentObj.goodsId}>
	<div style={{"background": "#fff"}} >
		<img src='src/assets/yay.jpg' style={this.imageStyle}/>
		<div style={{"marginLeft": "100px"}}>
			<div style={{"fontSize":"16px","lineHeight":"1.8"}}>{currentObj.goodsName}-{currentObj.goodsId}</div>
			<div style={{"lineHeight":"1.8"}}>售价:{currentObj.salePrice} 元</div>
			<div style={{"clear": "both"}}></div>
		</div>
	</div>
	</Link>
</SwipeAction>

 

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值