单击 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") 可能会起作用。

单击 actionButton 后隐藏 menuItem

Hiding a menuItem after actionButton click

html

shiny

shinydashboard

shinyjs