聊聊React onClick 传递参数的问题_JavaScript

上一篇: JS原生双栏穿梭选择框的实现示例下一篇:vue.js Router嵌套路由

聊聊React onClick 传递参数的问题

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了聊聊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 onClick 传递参数的问题全部内容，希望文章能够帮你解决聊聊React onClick 传递参数的问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：React 传递参数传递参数

上一篇: JS原生双栏穿梭选择框的实现示例下一篇:vue.js Router嵌套路由

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16

聊聊React onClick 传递参数的问题

&nbsp;背景说明

问题：

解决方案：

脚本宝典总结

背景说明