react怎样获取event事件对象

react获取event事件对象的方法:

一、使用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.webp' 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.webp' 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>

相关学习推荐:react视频教程

以上就是react怎样获取event事件对象的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    opporeno8参数配置及价格

    opporeno8参数配置及价格,面部,亿元,Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡:支持oppor11splus什么时候上市的Oppo R11S P

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    魅蓝note6性能参数有哪些

    魅蓝note6性能参数有哪些,摄像头,蓝牙,魅蓝note6性能参数有哪些魅力蓝色Note6最好拍照。电池寿命更长。蓝色Note6使用高通 snapdragon 625

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细