Shiny中如何用JavaScript修改UI元素属性 替代renderUI更新material_card标题

问题解决说明 #

1. 判断逻辑不生效的原因

你自定义的JS脚本上下文里没有暴露全局input对象，只有shiny内置的conditionalPanel等组件会在专门的沙箱上下文里解析input.xxx变量，所以直接写input.dropdown会报错。
实际上shiny:inputchanged事件的回调参数event已经携带了更新后的值，直接取event.value即可拿到下拉框的最新选中值。

2. 更新material_card标题的实现逻辑

shinymaterial渲染的material_card组件，标题为class属性为card-title的<span>元素，为了避免页面有多个卡片时选错，先给目标卡片加唯一id，再通过选择器定位到标题元素修改文本即可。

修改后可运行完整代码 #

library(shinymaterial)
library(shiny)

ui <- material_page(
  titlePanel("JavaScript修改卡片标题示例"),
  sidebarLayout(
    sidebarPanel(
      selectInput(
        "dropdown",
        "下拉菜单",
        c('Hat','Shoes','Jacket')
      ),
      tags$script('
        $(document).on("shiny:inputchanged", function(event) {
          if (event.name === "dropdown") {
            const selected = event.value;
            // 更新卡片标题
            $("#target_card .card-title").text("当前选中: " + selected);
            if(selected === "Jacket") {
              alert("你选择了Jacket，卡片标题已同步更新");
            }
          }
        });
      '),
      # 给目标卡片加唯一id
      material_card(
        id = "target_card",
        depth=5,
        title = '该值会随下拉菜单选中内容同步更新!'
      )
    ),
    mainPanel(
      h5('无其他内容')
    )
  )
)

server <- function(input, output) {
  # 无需服务端逻辑
}

shinyApp(ui = ui, server = server)

内容的提问来源于stack exchange，提问作者Aku-Ville Lehtimäki