updateRadioGroupButtons 删除 css

Question

我正在使用 radioGroupButtons 基于此代码的不同颜色：https://github.com/dreamRs/shinyWidgets/issues/41# 现在我希望能够更新选项，但是当我使用 updateRadioGroupButtons 更新时颜色消失了。如果我只更新选定的值，一切都很好，但如果我更新 choiceValues 和 choiceNames，颜色就会消失。

可重现代码：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
    radioGroupButtons(
        inputId = "sent", 
        label = "Sentiment", 
        choiceValues = -2:1, 
        checkIcon = list(yes = icon("check")),
        choiceNames = paste0(-2:1),
        justified = TRUE, width = "300px"
    ),
    tags$script("$(\"input:radio[name='sent'][value='-2']\").parent().css('background-color', '#DE6B63');"),
    tags$script("$(\"input:radio[name='sent'][value='-1']\").parent().css('background-color', '#EDB6B2');"),
    tags$script("$(\"input:radio[name='sent'][value='0']\").parent().css('background-color', '#E7E7E7');"),
    tags$script("$(\"input:radio[name='sent'][value='1']\").parent().css('background-color', '#B2EDB5');"),
    tags$script("$(\"input:radio[name='sent'][value='2']\").parent().css('background-color', '#7EF373');"),
    verbatimTextOutput(outputId = "res"),
    actionButton(inputId = "update", label = "Update")
)

server <- function(input, output, session) {
    
    output$res <- renderPrint(input$sent)
    
    observeEvent(input$update, {
        updateRadioGroupButtons(session = session, inputId = "sent", choiceValues = -2:2, choiceNames = paste0(-2:2))
    }, ignoreInit = TRUE)
}

shinyApp(ui, server)

Answer 1

可能有更简单的解决方案，但如果我们设置一个突变观察器，那么我们可以在每次检测到变化（突变）时应用 javascript。

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  radioGroupButtons(
    inputId = "sent", 
    label = "Sentiment", 
    choiceValues = -2:1, 
    checkIcon = list(yes = icon("check")),
    choiceNames = paste0(-2:1),
    justified = TRUE, width = "300px"
  ),
  tags$script("
  // this is the setting in the first instance
  $(\"input:radio[name='sent'][value='-2']\").parent().css('background-color', '#DE6B63');
$(\"input:radio[name='sent'][value='-1']\").parent().css('background-color', '#EDB6B2');
$(\"input:radio[name='sent'][value='0']\").parent().css('background-color', '#E7E7E7');
$(\"input:radio[name='sent'][value='1']\").parent().css('background-color', '#B2EDB5');
$(\"input:radio[name='sent'][value='2']\").parent().css('background-color', '#7EF373');

// lets listen to changes with a mutation observer
  // select the target node
var target = document.getElementById('sent')  

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if( document.getElementById('sent')) {
// here we apply the formatting again
$(\"input:radio[name='sent'][value='-2']\").parent().css('background-color', '#DE6B63');
$(\"input:radio[name='sent'][value='-1']\").parent().css('background-color', '#EDB6B2');
$(\"input:radio[name='sent'][value='0']\").parent().css('background-color', '#E7E7E7');
$(\"input:radio[name='sent'][value='1']\").parent().css('background-color', '#B2EDB5');
$(\"input:radio[name='sent'][value='2']\").parent().css('background-color', '#7EF373');
    }
  });    
});

// configuration of the observer:
// it works with childList although I would expect it to work with characterData
var config = {
  childList: true,
  subtree: true,
  attruibutes: true,
  characterData: true
};

// pass in the target node, as well as the observer options
observer.observe(target, config); 
              "),
  
  verbatimTextOutput(outputId = "res"),
  actionButton(inputId = "update", label = "Update")
)

server <- function(input, output, session) {
  
  output$res <- renderPrint(input$sent)
  
  observeEvent(input$update, {
    updateRadioGroupButtons(session = session, inputId = "sent", choiceValues = -2:2, choiceNames = paste0(-2:2), checkIcon = list(yes = icon("check")))
  }, ignoreInit = TRUE)
}

shinyApp(ui, server)

updateRadioGroupButtons 删除 css

updateRadioGroupButtons removes css

r

shiny

shinywidgets