如何使用JS统计Shiny中selectInput的选择操作次数？

问题分析 #

使用observeEvent(input$selInput)统计选择操作时存在两个问题：

• 应用启动时默认选中的选项未被计入统计
• 重复点击同一选项不会触发计数
  通过JavaScript方案可以在不修改UI布局（如不添加multiple = TRUE）的前提下解决这些问题，同时修正原代码中x()-1的异常。

解决方案代码 #

library(shiny)

ui = fluidPage(
  hr(),
  selectInput("selInput", label = NULL, c("Cyl" = "cyl", "Trans" = "am", "Gears" = "gear"), selected = "cyl"),
  actionButton("addBtn", "Add"), 
  hr(),
  textOutput("clickSelInput"),
  textOutput("clickAddBtn"),
  tableOutput("data"),
  # 自定义JavaScript代码监听选择操作
  tags$script(HTML('
    $(document).ready(function() {
      const selectElement = $("#selInput");
      
      // 初始加载时，默认选中的选项计入一次统计
      Shiny.setInputValue("select_click", 1, {priority: "event"});
      
      // 监听下拉选项的点击事件，无论是否重复选择同一选项都触发计数
      selectElement.on("click", "option", function() {
        const current = Shiny.inputValues.select_click || 0;
        Shiny.setInputValue("select_click", current + 1, {priority: "event"});
      });
    });
  '))
)  

server = function(input, output) {
  x = reactiveVal(0)
  y = reactiveVal(0)
    
  output$data <- renderTable({mtcars[1:10, c("mpg", input$selInput), drop = FALSE]})
  
  # 监听JavaScript发送的自定义信号，更新统计计数
  observeEvent(input$select_click, {
    x(input$select_click)
  })
    
  observeEvent(input$addBtn, {y(y() + 1)})
    
  output$clickSelInput <- renderText({paste('Select Input clicks =', x())})
  output$clickAddBtn <- renderText({paste('Add Button clicks =', y())})
    
}

shinyApp(ui, server)

方案说明 #

1. JavaScript部分

   • 页面加载完成后，先向Shiny发送初始计数1，对应应用启动时默认选中的选项
   • 监听selectInput下拉菜单的选项点击事件，每次点击时获取当前计数并加1，再发送给Shiny，确保重复点击同一选项也会触发计数

2. 服务器端部分

   • 不再监听input$selInput的值变化，而是监听JavaScript发送的自定义输入input$select_click
   • 直接将自定义输入的值赋值给响应式变量x，无需再做减1操作，统计结果完全符合预期

内容的提问来源于stack exchange，提问作者Village.Idyot