聊聊React onClick 传递参数的问题
更新时间：2021年10月27日 14:16:53 作者：我是大头鸟
很多朋友向小编反映一个问题关于React onClick 传递参数的问题，当点击删除按钮需要执行删除操作，针对这个问题该如何处理呢？下面小编给大家带来了React onClick 传递参数的问题，感兴趣的朋友一起看看吧
背景说明
在下图这样的列表中，点击删除按钮需要执行删除操作
列表产生：
{
title: '操作',
dataIndex: 'rowguid',
key: 'rowguid',
render: (text, record) => (
<Space size="middle">
<Button type="primary" size="small" >修改</Button>
<Button type="danger" size="small" >删除</Button>
</Space>
)
}
我需要在渲染生成删除按钮的时候加上事件，并且在点击的时候调用，并且还要传递参数，这个参数
开始我是这样写的：
但是这样的问题是，在页面加载的时候就执行了delByGuid 这个函数，我们控制台的输出：
不仅仅如此，当我点击删除按钮的时候，函数也没有执行，看来这样是不可以的
问题：
1. 页面渲染的时候执行
2.点击按钮，onclick 未执行
解决方案：
{
title: '操作',
dataIndex: 'rowguid',
key: 'rowguid',
render: (text, record) => (
<Space size="middle">
<Button type="primary" size="small" >修改</Button>
<Button type="danger" size="small" onClick={(e)=>delByGuid(text)}>删除</Button>
</Space>
)
}
onClick={(e)=>delByGuid(text)}
这样就解决了，页面加载的时候不行，而且在点击的时候能调用
到此这篇关于React onClick 传递参数的文章就介绍到这了,更多相关React onClick 传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
一篇文章介绍redux、react-redux、redux-saga总结
这篇文章主要介绍了一篇文章介绍redux、react-redux、redux-saga总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了JavaScript中rem布局在react中的应用 的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了React基于RBAC的权限控制,通过定义角色和权限、编写权限检查函数以及在路由、组件和选择控件中使用这些函数,可以灵活地控制应用中的访问权限,需要的朋友可以参考下2024-05-05
以文本为例,为了实现无限循环的视觉效果,我们需要准备两段相同的文本,并让第二段文本的头部衔接在第一段文本的尾部,同时,为两段文本设置相同的滚动动画,本文给大家介绍了基于React实现无限滚动表格,需要的朋友可以参考下2023-11-11
使用useInfiniteScroll hook可以处理检测用户何时滚动到页面底部的逻辑,并触发回调函数以加载更多数据,它还提供了一种简单的方法来管理加载和错误消息的状态,今天通过实例代码介绍下react滚动加载useInfiniteScroll 相关知识,感兴趣的朋友跟随小编一起看看吧2023-09-09
React Native中NavigatorIOS组件的简单使用详解
这篇文章主要介绍了React Native中NavigatorIOS组件的简单使用详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了react-native-video实现视频全屏播放的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了探究react-native 源码的图片缓存问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本篇文章主要介绍了ReactJs实现树形结构的数据显示的组件的示例，非常具有实用价值，需要的朋友可以参考下2017-08-08
如何将你的AngularJS1.x应用迁移至React的方法
本篇文章主要介绍了如何将你的AngularJS1.x应用迁移至React的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论