动态多操作按钮遵循某种模式，导致与输入相对应的动态多个输出

Question

我正在构建一个 R Shiny 应用程序，我可以在其中动态添加 UI，并且每个 UI 都有自己的用于删除 UI 的按钮。 每个按钮都有自己的名称，格式为“删除[数字]”，例如delete1、delete2、delete34等。数字对应于添加的UI - Widget1、Widget2、Widget34等。

我试图观察何时按下操作按钮，以便我可以删除适当的小部件。

我正在关注这个答案这里。

我遇到的问题是如何访问按下的按钮的 id。

这是我当前的服务器代码：

library(shinydashboard)
library(shiny)
library(shinyjs)
library(shinyjqui)
library(gridstackeR)
library(plotly)

#2b3940
ui <- fluidPage (
  useShinyjs(),
  tags$head(
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.0.1/gridstack-all.min.js", type='module'),
    tags$script(HTML('
      let numFirstWidgets = 0;
      function addFirstWidget() {
        var grid = document.querySelector(\'.grid-stack\').gridstack;
        let ids = "widget" + numFirstWidgets;
        grid.addWidget(`<div class="grid-stack-item"><div class="grid-stack-item-content" id=${ids}></div></div>`, {h:3, w: 2});
        numFirstWidgets += 1;
      }
    '))
  ),
  grid_stack(id="mygrid"),
  actionButton("first_widget", "First Widget"),
  # plotlyOutput("plot"),
  title = "Gridstack Prototype"
)

server <- function(input, output, session) {
  numOfWidgets <- 0
  observeEvent(input$first_widget, {
    # browser()
    runjs("addFirstWidget();")
    insertUI(
      paste0("#widget", numOfWidgets),
      where = "afterBegin",
      tagList(
        actionButton(paste0("delete", numOfWidgets), "Delete This Panel"),
        plotlyOutput(paste0("plotly", numOfWidgets), height="100%")
      ),
      output[[paste0("plotly", numOfWidgets)]] <- renderPlotly({
        plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
      })
    )
    numOfWidgets <<- numOfWidgets + 1
  })
  
  observeEvent(
    lapply(
      names(input)[grep("delete[0-9]+",names(input))],
      function(name){
        input[[name]]
      }
    ),
    {
      removeUI(paste("widget", gsub("[^0-9]", "", name)))
    }
  )
  
}

shinyApp(ui = ui, server = server)

但是，这不起作用，因为它给了我错误：

Warning: Error in is.factor: object 'name' not found

如何获取输入的具体名称，以便我可以使用它来删除相应的 UI？操作按钮的数量可以无限。

Answer 1

您不需要在这里使用

removeUI

和

observeEvent

，它更简单：当您创建用于删除的

actionButton

时，传递一个

onclick

参数来删除相关的

widget

：

actionButton(
  paste0("delete", numOfWidgets),
  "Delete This Panel",
  onclick = paste0(
    "var $ToDelete = $('#widget",
    numOfWidgets,
    "'); setTimeout(function(){$ToDelete.remove();},0);"
  )
)