如何在R/Shiny reactable的JS回调中区分单元格内多个按钮点击

解决方案 #

你可以通过以下两种方法实现按钮点击的区分，两种方案都可以在R端分别接收两个按钮的点击事件：

方案1：利用reactable onClick回调的原生事件参数（推荐）

reactable的onClick JS回调实际支持第三个入参：原生点击事件对象event，你只需要在渲染按钮时给两个按钮添加自定义标识属性，再在回调中通过事件对象读取标识即可。

1. 修改按钮渲染的cell定义，给两个按钮添加data-action自定义属性：

details = colDef(
  name = "",
  sortable = FALSE,
  cell = function() {
    approve_btn <- htmltools::tags$button(
      "Approve",
      `data-action` = "approve"
    )
    decline_btn <- htmltools::tags$button(
      "Decline",
      `data-action` = "decline"
    )
    return(list(approve_btn, decline_btn))
  }
)

2. 修改onClick回调逻辑，读取按钮标识分发事件：

onClick = JS("function(rowInfo, colInfo, event) {
  // 仅处理details列的点击事件
  if (colInfo.id !== 'details') return
  // 读取触发点击元素的自定义标识
  const clickAction = event.target.dataset.action
  // 点击到按钮以外的单元格区域直接跳过
  if (!clickAction) return
  const rowNumber = rowInfo.index + 1
  if (window.Shiny) {
    if (clickAction === 'approve') {
      Shiny.setInputValue('approve_button_click', { index: rowNumber, rowData: rowInfo.row }, { priority: 'event' })
    } else if (clickAction === 'decline') {
      Shiny.setInputValue('decline_button_click', { index: rowNumber, rowData: rowInfo.row }, { priority: 'event' })
    }
  }
}")

方案2：直接给按钮绑定独立点击事件（无需配置全局onClick）

你也可以直接在生成按钮时给每个按钮绑定独立的onclick事件，不需要用到reactable的全局点击回调：

details = colDef(
  name = "",
  sortable = FALSE,
  cell = function() {
    approve_btn <- htmltools::tags$button(
      "Approve",
      onclick = htmltools::HTML("
        const rowIndex = +this.closest('tr').dataset.index + 1
        Shiny.setInputValue('approve_button_click', { index: rowIndex }, { priority: 'event' })
      ")
    )
    decline_btn <- htmltools::tags$button(
      "Decline",
      onclick = htmltools::HTML("
        const rowIndex = +this.closest('tr').dataset.index + 1
        Shiny.setInputValue('decline_button_click', { index: rowIndex }, { priority: 'event' })
      ")
    )
    return(list(approve_btn, decline_btn))
  }
)

两种方案都可以在R端通过input$approve_button_click和input$decline_button_click分别接收两个按钮的点击事件，拿到对应的行号和行数据。

内容的提问来源于stack exchange，提问作者Kyle Weise