聊聊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)文章
reset.css瀏覽器默認(rèn)樣式表重置(user?agent?stylesheet)的示例代碼
這篇文章主要介紹了reset.css瀏覽器默認(rèn)樣式表重置（user?agent?stylesheet）,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12
本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信)，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下2017-09-09
React組件三大核心屬性State?props?Refs介紹
組件實(shí)例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問不到?this，也就不存在組件實(shí)例這種說法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2023-02-02
這篇文章主要介紹了React事件節(jié)流效果失效的原因及解決，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
這篇文章主要為大家介紹了React?18源碼深入分析useMemo?useCallback?memo用法及區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了React反向代理與CSS模塊化的使用案例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
這篇文章主要為大家詳細(xì)介紹了React封裝全屏彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
教你使用vscode 搭建react-native開發(fā)環(huán)境
本文記錄如何使用vscode打造一個(gè)現(xiàn)代化的react-native開發(fā)環(huán)境，旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法，感興趣的朋友跟隨小編一起看看吧2021-07-07
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)Modal彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08