如何在Shiny应用启动时设置actionButton默认选中样式？

方案一：使用shinyjs包（推荐，逻辑清晰） #

完整代码 #

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  div(class = "btn-group",
      actionButton("one", "One"),
      actionButton("two", "Two"),
      actionButton("three", "Three")
  ),
  textOutput("text")
)

server <- function(session, input, output) {
  
  v <- reactiveValues(data = 2)
  
  # 启动时为按钮two添加选中样式
  observe({
    shinyjs::addClass(id = "two", class = "active")
  }) %>% bindEvent(session$clientData$url_search)
  
  observeEvent(input$one, {
    v$data <- 1
    shinyjs::removeClass(c("two", "three"), "active")
    shinyjs::addClass("one", "active")
  })
  
  observeEvent(input$two, {
    v$data <- 2
    shinyjs::removeClass(c("one", "three"), "active")
    shinyjs::addClass("two", "active")
  })
  
  observeEvent(input$three, {
    v$data <- 3
    shinyjs::removeClass(c("one", "two"), "active")
    shinyjs::addClass("three", "active")
  })
  
  output$text <- renderText({v$data})
  
}

shinyApp(ui, server)

说明 #

• 引入shinyjs实现动态CSS类操作，useShinyjs()必须在UI中声明
• 会话启动时通过addClass给按钮"two"添加Bootstrap的active类，这是按钮呈现灰色选中状态的核心
• 每个按钮的点击事件中，先移除其他按钮的active类，再给自己添加，确保同一时间只有一个按钮处于选中状态
• 把按钮放在btn-group容器中，是Bootstrap的分组按钮规范，能让样式更协调

方案二：原生JavaScript实现（无额外依赖） #

完整代码 #

library(shiny)

ui <- fluidPage(
  div(class = "btn-group",
      actionButton("one", "One"),
      actionButton("two", "Two"),
      actionButton("three", "Three")
  ),
  textOutput("text"),
  tags$script(HTML('
    // 页面加载完成后设置按钮two为选中状态
    $(document).ready(function() {
      $("#two").addClass("active");
    });
    
    // 绑定所有按钮的点击事件
    $("#one, #two, #three").click(function() {
      // 移除所有按钮的选中样式
      $("#one, #two, #three").removeClass("active");
      // 给当前点击的按钮添加选中样式
      $(this).addClass("active");
    });
  '))
)

server <- function(session, input, output) {
  
  v <- reactiveValues(data = 2)
  
  observeEvent(input$one, {
    v$data <- 1
  })
  
  observeEvent(input$two, {
    v$data <- 2
  })
  
  observeEvent(input$three, {
    v$data <- 3
  })
  
  output$text <- renderText({v$data})
  
}

shinyApp(ui, server)

说明 #

• 利用jQuery（Shiny内置）实现页面加载后的初始化操作和点击事件绑定
• 无需安装额外包，直接通过tags$script插入JS代码
• 逻辑和方案一一致：初始化时给目标按钮加active类，点击时切换所有按钮的类状态

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