在actionButton点击后隐藏一个menuItem

Question

我正在构建一个应用程序，用户可以在其中看到登录页面。单击actionButton 后，我希望将用户移动到另一个menuItem 并隐藏登录页面。 shinyjs::hide() 似乎非常适合此目的，但我似乎无法让函数接受有问题的 menuItem 的名称作为要隐藏的对象的 ID。

library(shiny)
library(shinydashboard)
library(shinyjs)

## UI ##

ui <- dashboardPage(

  skin = "black",
  dashboardHeader(
    title = "Template"
  ),

  dashboardSidebar(
    sidebarMenu(id = "sidebarmenu",
      menuItem("Landingpage", tabName = "landing", icon = icon("cog")),
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
      )
  ),

  dashboardBody(
    useShinyjs(),
    tabItems(
      tabItem(tabName = "landing", 
              h2("Landing Page"),
              actionButton(inputId = "confirm", 
                           label = "Confirm", 
                           icon = icon("ok-circle"))
              ),
      tabItem(tabName = "dashboard", 
              h2("Dashboard Content")
              )
    )
  )
)

## Server ##

server <- function(input, output, session) { 

  observeEvent(input$confirm, {

    shinyjs::hide(id = "landing")
    updateTabItems(session, "sidebarmenu", "dashboard")

  })
}

shinyApp(ui, server)

这是我最近的尝试。我会以错误的方式解决这个问题吗？ shinyjs::hide() 是正确的做法吗？

Answer 1

更好的方法是在用户单击确认按钮后重新呈现您的菜单。您可以使用renderMenu 函数来做到这一点。

library(shiny)
library(shinydashboard)
ui <- dashboardPage(

  skin = "black",
  dashboardHeader(
    title = "Template"
  ),

  dashboardSidebar(
    sidebarMenuOutput("sidebarmenu")
  ),

  dashboardBody(
    tabItems(
      tabItem(tabName = "landing",
              fluidRow(
              h2("Landing Page"),
              actionButton(inputId = "confirm",
                           label = "Confirm",
                           icon = icon("ok-circle")))
      ),
      tabItem(tabName = "dashboard",
              fluidRow(
              h2("Dashboard Content"))
      )
    )
  )
)

## Server ##

server <- function(input, output, session) { 
  output$sidebarmenu <- shinydashboard::renderMenu({
    sidebarMenu(id='sidebarmenu',
                menuItem("Landingpage", tabName = "landing", icon = icon("cog")),
                menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
    )}
  )

  observeEvent(input$confirm, {
    output$sidebarmenu <- shinydashboard::renderMenu({
      sidebarMenu(id='sidebarmenu',
                  menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")))
    })
    updateTabsetPanel(session, "sidebarmenu", "dashboard")
  })
}

shinyApp(ui, server)

---

关于shinyjs

您可以通过在浏览器中检查元素来检查您的 ID（右键单击 + 检查您的元素）。在您的情况下，我找不到 ID，但您可以将其包装在 div(id=shiny-tab-landing, sidebarMenu(...))

shinyjs::hide(id = "shiny-tab-landing") 可能会起作用。