React中onClick傳遞參數(shù)問題的示例分析

這篇文章給大家分享的是有關(guān)React中onClick傳遞參數(shù)問題的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

 背景說明

在下圖這樣的列表中，點(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ù)，我們控制臺(tái)的輸出：

 不僅僅如此，當(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ù)問題的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！