聊聊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 传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了react项目从新建到部署的实现示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02![详解react-webpack2-热模块替换[HMR]](//img.jbzj.com/images/xgimg/bcimg1.png)
这篇文章主要介绍了详解react-webpack2-热模块替换[HMR]， 小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家介绍了React的特征单向数据流学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要跟大家介绍了关于React中事件处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习React具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
本文主要介绍了移动端点击事件的300ms延迟问题,并详细的介绍了三种解决方法,具有一定的参考价值,感兴趣的可以了解一下2025-03-03
react umi 刷新或关闭浏览器时清除localStorage方式
这篇文章主要介绍了react umi 刷新或关闭浏览器时清除localStorage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了关于React项目中的PDF展示解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家介绍了redux功能强大的Middleware中间件使用学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
React是用于构建用户界面的JavaScript库，本文主要介绍了如何创建自己的第一个React页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了react hooks入门详细教程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
![详解react-webpack2-热模块替换[HMR]](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论