如何重置Shiny应用中htmlwidget的点击事件数据并添加重置按钮？

我在Shiny应用中嵌入了一个自定义htmlwidget，用户点击组件内的区域时，它会发送位置数据，用来过滤应用里的数据表。现在需要添加一个“重置”按钮，点击后让组件停止向Shiny发送数据。

现有代码 #

1. htmlwidget的JavaScript渲染代码 #

// inside htmlwidget JS render function
HTMLWidgets.widget({
  name: widget,
  type: output,
  factory: function(el, width, height) {
    return {
      renderValue: function() {
        var configuration = {
                 ...
            onDrawShapes: function() {
              var shapes = document.getElementsByClassName("shapes");
              for (var i = 0; i < shapes.length; i++) {
              shapes[i].onclick = function(ev){
               Shiny.onInputChange("selectedReg", this.__data__);
          }
        }
      }
    }
   }
  }
});

2. Shiny应用服务器端代码 #

# server function in shiny app
server <- function(input, output, session) {
    ...
    # reactive expr region filtering
    reg_filter <- reactive({
      if (!is.null(input$chosenReg$pos)) { # 注：此处应为input$selectedReg$pos，与JS中发送的输入ID一致
        table_data() %>%
           filter(POS==input$selectedReg$pos)
      } else {
         table_data()
      }
    })
    
output$table <- renderDT({
    DT::datatable(
      reg_filter()  
     )
  })
}

解决方案 #

步骤1：在Shiny UI中添加重置按钮 #

在UI部分加入重置按钮：

ui <- fluidPage(
  # 其他UI元素
  actionButton("reset_btn", "重置"),
  # 你的htmlwidget输出
  htmlwidgetOutput("your_widget"),
  DTOutput("table")
)

步骤2：修改htmlwidget的JS代码，添加发送控制开关 #

在factory函数里维护一个开关变量，控制是否发送数据；同时监听Shiny的自定义消息切换开关状态：

HTMLWidgets.widget({
  name: widget,
  type: output,
  factory: function(el, width, height) {
    // 初始化开关，默认允许发送数据
    var allowSendData = true;
    
    // 监听Shiny发送的开关控制消息
    Shiny.addCustomMessageHandler("toggle_send_data", function(message) {
      allowSendData = message.allow;
    });
    
    return {
      renderValue: function() {
        var configuration = {
                 ...
            onDrawShapes: function() {
              var shapes = document.getElementsByClassName("shapes");
              for (var i = 0; i < shapes.length; i++) {
              shapes[i].onclick = function(ev){
                // 仅当开关开启时发送数据
                if (allowSendData) {
                  Shiny.onInputChange("selectedReg", this.__data__);
                }
              }
            }
          }
        }
      },
      // 可选：组件更新时自动重置开关状态
      resize: function(width, height) {
        allowSendData = true;
      }
    }
  }
});

步骤3：在Shiny服务器端监听重置按钮，发送控制消息 #

在server函数中添加按钮点击的响应逻辑，同时清空过滤条件让数据表恢复全量显示：

server <- function(input, output, session) {
    ...
    # 监听重置按钮点击事件
    observeEvent(input$reset_btn, {
      // 发送消息关闭数据发送开关
      session$sendCustomMessage("toggle_send_data", list(allow = FALSE))
      // 清空selectedReg输入值，触发数据表恢复全量数据
      Shiny.setInputValue("selectedReg", NULL)
    })
    
    # 修正后的区域过滤逻辑
    reg_filter <- reactive({
      if (!is.null(input$selectedReg$pos)) {
        table_data() %>%
           filter(POS==input$selectedReg$pos)
      } else {
         table_data()
      }
    })
    
output$table <- renderDT({
    DT::datatable(
      reg_filter()  
     )
  })
}

补充说明 #

• 点击重置按钮后，既关闭组件的数据发送开关，又清空过滤输入值，确保数据表自动恢复全量显示。
• 如果需要重置后再次点击组件恢复数据发送，可以修改按钮逻辑为切换开关状态，或者新增“恢复”按钮发送allow = TRUE的控制消息。

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