聊聊React onClick 傳遞參數(shù)的問題

更新時(shí)間：2021年10月27日 14:16:53 作者：我是大頭鳥

很多朋友向小編反映一個(gè)問題關(guān)于React onClick 傳遞參數(shù)的問題，當(dāng)點(diǎn)擊刪除按鈕需要執(zhí)行刪除操作，針對這個(gè)問題該如何處理呢？下面小編給大家?guī)砹薘eact onClick 傳遞參數(shù)的問題，感興趣的朋友一起看看吧

背景說明

在下圖這樣的列表中，點(diǎn)擊刪除按鈕需要執(zhí)行刪除操作

列表產(chǎn)生：

	{
		title: '操作',
		dataIndex: 'rowguid',
		key: 'rowguid',
	    render: (text, record) => (
		      <Space size="middle">
		        <Button type="primary" size="small" >修改</Button>
		        <Button type="danger" size="small" >刪除</Button>
		      </Space>
			)
	}

我需要在渲染生成刪除按鈕的時(shí)候加上事件，并且在點(diǎn)擊的時(shí)候調(diào)用，并且還要傳遞參數(shù)，這個(gè)參數(shù)

開始我是這樣寫的：

但是這樣的問題是，在頁面加載的時(shí)候就執(zhí)行了delByGuid 這個(gè)函數(shù)，我們控制臺的輸出：

不僅僅如此，當(dāng)我點(diǎn)擊刪除按鈕的時(shí)候，函數(shù)也沒有執(zhí)行，看來這樣是不可以的

問題：

1. 頁面渲染的時(shí)候執(zhí)行

2.點(diǎn)擊按鈕，onclick 未執(zhí)行

解決方案：

	{
		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)}

這樣就解決了，頁面加載的時(shí)候不行，而且在點(diǎn)擊的時(shí)候能調(diào)用

到此這篇關(guān)于React onClick 傳遞參數(shù)的文章就介紹到這了,更多相關(guān)React onClick 傳遞參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例
這篇文章主要介紹了react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
詳解react-webpack2-熱模塊替換[HMR]
這篇文章主要介紹了詳解react-webpack2-熱模塊替換[HMR]，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
React的特征單向數(shù)據(jù)流學(xué)習(xí)
這篇文章主要為大家介紹了React的特征單向數(shù)據(jù)流學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
React學(xué)習(xí)筆記之事件處理（二）
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
React?事件綁定的最佳實(shí)踐
本文主要介紹了移動端點(diǎn)擊事件的300ms延遲問題,并詳細(xì)的介紹了三種解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-03-03
react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
關(guān)于React項(xiàng)目中的PDF展示解決方案
這篇文章主要介紹了關(guān)于React項(xiàng)目中的PDF展示解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
redux功能強(qiáng)大的Middleware中間件使用學(xué)習(xí)
這篇文章主要為大家介紹了redux功能強(qiáng)大的Middleware中間件使用學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
如何創(chuàng)建自己的第一個(gè)React 頁面
React是用于構(gòu)建用戶界面的JavaScript庫，本文主要介紹了如何創(chuàng)建自己的第一個(gè)React頁面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
react hooks入門詳細(xì)教程
這篇文章主要介紹了react hooks入門詳細(xì)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04