想要创建具有相似参数的自定义 numericRangeInput

Question

出于美学原因，我正在制作一个与 [shinyWidgets] 中的功能相同的自定义 numericRangeInput。1 但是，我在模仿这一论点时遇到了麻烦。

我想要一个 inputId 用于整个组件，我可以用与 shinyWidget 的输入相同的方式调用这些值。

这是我目前所拥有的：

library(tidyverse)

numeric_input_ui <- function(title = "title", text = "to", id = c("id1","id2"), placeholder = c(0,0), value = c(0,0)){
  HTML(
    str_glue(
      '<label>{title}
      <div class="input-group input-group-sm m-4" style="margin:0px!important;margin-top:5px!important;margin-bottom:10px!important;">
  <input class="form-control" type="number" id="{id[1]}" placeholder="{placeholder[1]}" value="{value[1]}">
  <div class="input-group-prepend input-group-append">
    <div class="input-group-text">{text}</div>
  </div>
  <input class="form-control" type="number" id="{id[2]}" placeholder="{placeholder[2]}" value="{value[2]}"></input>
</div>
      </label>'
    )
  )
}

如您所见，我现在用两个 ID 设置了它...这使得管理服务器端时很头疼，因为我试图在闪亮的应用程序上实现它。欢迎在我的问题之外对函数本身提出任何建议！

Answer 1

我不确定是否理解。为什么不使用你拆分的唯一 id：

numeric_input_ui <- function(
  title = "title", text = "to", id, placeholder = c(0,0), value = c(0,0)
){
  id1 <- paste0(id, "1")
  id2 <- paste0(id, "2")
  HTML(
    str_glue(
      '
<label>
   {title}
   <div class="input-group input-group-sm m-4" style="margin:0px!important;margin-top:5px!important;margin-bottom:10px!important;">
      <input class="form-control" type="number" id="{id1}" placeholder="{placeholder[1]}" value="{value[1]}">
      <div class="input-group-prepend input-group-append">
         <div class="input-group-text">{text}</div>
      </div>
      <input class="form-control" type="number" id="{id2}" placeholder="{placeholder[2]}" value="{value[2]}">
   </div>
</label>
'
    )
  )
}

然后在服务器中使用返回两个值的反应导体：

numInput <- reactive({
  c(input[[paste0(id, "1")]], input[[paste0(id, "2")]])
})

这种方式有什么不方便的地方？没有更多的上下文，很难找出你的问题。