R 闪亮有条件地改变 numericInput 背景颜色

Question

考虑以下代码：

library(shiny)

ui <- shinyUI(
    fluidPage(
        column(12,
               numericInput("test", h5("Test value:"), value = 500, min = 0, max = 10000, step = 100, width = '200px')
        )
    )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

我想根据无效的用户输入将 numericInput 小部件的背景颜色更改为红色。 因此，如果用户输入文本或最小值和最大值范围之外的值，则小部件应为红色。

请注意，我不能使用使用 CSS 文件的解决方案，例如：

input:invalid {
    background-color: #FFCCCC !important;
}

原因是，如果用户在 numericInput 语句中输入任何不是“step”值倍数的值，它会将背景着色为红色（有关详细信息，请参阅： R闪亮的 numericInput 步骤和最小值交互）。

那么如何通过基于我定义的验证规则有条件地设置样式来实现我自己的手动验证？ 也就是说，我可以应用任何规则来说明什么是有效的，例如：

• if (is.numeric(input$test))
• 如果（输入$测试> = 0）
• 如果（输入$测试 <= 10000）

Answer 1

您可以使用Shinyjs来实现这Shinyjs 。 您可以根据需要调整颜色更改规则（我根据您的其他问题中的 5 步顺序定义了规则）。

library(shiny)

jsCode <- '
shinyjs.backgroundCol = function(params) {
var defaultParams = {
id : null,
col : "red"
};
params = shinyjs.getParams(params, defaultParams);
var el = $("#" + params.id);
el.css("background-color", params.col);
}'

ui <- fluidPage(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  sidebarPanel(
    numericInput("val", "Enter value:", value=50, min = 0, step = 5)
  )
)

server <- function(input, output, session) {
  observeEvent(input$val, {
    x <- input$val
    if (x %% 5 != 0 | x < 0 | is.na(x))  {
      js$backgroundCol("val","red")
    } else {
      js$backgroundCol("val","white")
    }
  })
}

shinyApp(ui, server)

Answer 2

如果您想避免使用 JS，但希望一个对象（或一组对象）根据某些用户输入更新它们的颜色，这是另一个答案：

#define reactive value
color <- reactiveVal(#77787B)

#Current Color----
#some user action
  observeEvent(input$some_action,{
    color <- switch (condition,
                     "case1" = "#57a595",
                     "case2" = "#f4552e",
                     "#77787B" #default color
                     
    )
  })
  output$color_style <- renderUI({
    #any valid selector can be used in place of "elementId"
    tags$style(HTML(paste0("#elementId {
      background-color: ",color,";}")))
  })

上面的代码将进入您的服务器脚本，然后您只需要定义输入对象和您在 ui 脚本中修改颜色的元素。

这也可用于更新任何其他 CSS 属性