天天看點

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

 我需要在渲染生成删除按鈕的時候加上事件,并且在點選的時候調用,并且還要傳遞參數,這個參數

開始我是這樣寫的:

React onClick 傳遞參數
React onClick 傳遞參數

 但是這樣的問題是,在頁面加載的時候就執行了delByGuid 這個函數,我們控制台的輸出:

React onClick 傳遞參數

 不僅僅如此,當我點選删除按鈕的時候,函數也沒有執行,看來這樣是不可以的

問題:

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