Shiny+shinydashboard菜单含输入组件时tabItem无法显示内容求助

我来帮你分析并解决这个问题：

问题根源 #

当你在menuItem内部直接添加numericInput、submitButton这类输入组件时，menuItem的默认行为会发生变化——它会从「触发tab切换的导航项」变成「可折叠的菜单容器」。此时点击menuItem只会展开/折叠内部的输入组件，而不会触发对应的tabItem切换，这就是主区域内容无法显示的原因。

解决方案 #

这里提供两种实用的解决思路，你可以根据需求选择：

方案一：将输入组件与导航项分离（推荐）

让menuItem专注于tab切换，输入组件放在sidebar的独立区域，通过conditionalPanel根据当前选中的tab动态显示对应内容，逻辑清晰且用户体验更好：

library(shiny)
library(shinydashboard)
library(DT)
library(RODBC)
library(stringr)
library(dplyr)

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "sidebar_tabs", # 给侧边栏菜单设置ID，用于判断当前选中的tab
    menuItem("Query1", tabName="Query1", icon=icon("table")),
    menuItem("Query2", tabName="Query2", icon=icon("table"))
  ),
  # 根据当前选中的tab显示对应输入组件
  conditionalPanel(
    condition = "input.sidebar_tabs == 'Query1'",
    numericInput('Start1','Start Date',19800312,min=20170101,max=20200101),
    numericInput('End1','End Date',19800312,min=20170101,max=20200101),
    textInput('Office1','Office ID','0'),
    submitButton("Submit")
  ),
  conditionalPanel(
    condition = "input.sidebar_tabs == 'Query2'",
    numericInput('Start2','Start Date',20180101,min=20170101,max=20200101),
    numericInput('End2','End Date',20180101,min=20170101,max=20200101),
    textInput('Office2','Office ID','0'),
    submitButton("Submit")
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(tabName="Query1",h2("Dashboard tab content")),
    tabItem(tabName = "Query2",h2("Widgets tab content"))
  )
)

ui <- dashboardPage(
  dashboardHeader(title = 'LOSS PREVENTION'),
  sidebar,
  body
)

server <- function(input, output) {
  # 额外建议：数据库连接放在server内，避免全局连接泄漏
  # connect <- reactive({
  #   odbcConnect('B1P HANA',uid='fchen4',pwd='XUEqin0312')
  # })
  # session$onSessionEnded(function() {
  #   odbcClose(connect())
  # })
}

shinyApp(ui, server)

方案二：保留输入组件在menuItem内（下拉菜单形式）

如果你坚持要把输入组件放在menuItem内部，可以将menuItem设置为下拉菜单，用menuSubItem专门触发tab切换：

library(shiny)
library(shinydashboard)
library(DT)
library(RODBC)
library(stringr)
library(dplyr)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Query1", icon=icon("table"), startExpanded = TRUE,
             menuSubItem("View Results", tabName="Query1"),
             numericInput('Start1','Start Date',19800312,min=20170101,max=20200101),
             numericInput('End1','End Date',19800312,min=20170101,max=20200101),
             textInput('Office1','Office ID','0'),
             submitButton("Submit")),
    menuItem("Query2", icon=icon("table"), startExpanded = FALSE,
             menuSubItem("View Results", tabName="Query2"),
             numericInput('Start2','Start Date',20180101,min=20170101,max=20200101),
             numericInput('End2','End Date',20180101,min=20170101,max=20200101),
             textInput('Office2','Office ID','0'),
             submitButton("Submit"))
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(tabName="Query1",h2("Dashboard tab content")),
    tabItem(tabName = "Query2",h2("Widgets tab content"))
  )
)

ui <- dashboardPage(
  dashboardHeader(title = 'LOSS PREVENTION'),
  sidebar,
  body
)

server <- function(input, output) {
}

shinyApp(ui, server)

额外小建议 #

1. 不要在全局环境中建立数据库连接，建议放在server函数内用reactive创建，并在会话结束时关闭，避免连接泄漏。
2. 可以考虑用actionButton替代submitButton，配合observeEvent使用，交互会更灵活。

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