如何通过闪亮的按钮动态添加/删除输入字段

Question

我一直在寻找一种解决方案，该方法如何使用闪亮的按钮添加和删除输入字段。我没有源代码，因为我没有取得太大进展，但是这个jQuery示例（http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery /）可以很好地说明我要完成的工作。这是否有可能在闪亮或我应该使用闪亮js做到这一点？先感谢您！

Answer 1

谢谢@Mikko Marttila 的回答。我能够将它用于我的目的。另外，关于所有输入框在此处重新渲染的问题，我找到了一个从此答案中工作的解决方案。您可以使用 保存所有用户输入reactiveValuesToList()，然后相应地调用反应列表，将每个值设置为语句中相应的用户输入lapply()。

library(shiny)

ui <- shinyUI(fluidPage(

  sidebarPanel(

    actionButton("add_btn", "Add Textbox"),
    actionButton("rm_btn", "Remove Textbox"),
    textOutput("counter")

  ),

  mainPanel(uiOutput("textbox_ui"))

))

server <- shinyServer(function(input, output, session) {

  # Track the number of input boxes to render
  counter <- reactiveValues(n = 0)

  # Track all user inputs
  AllInputs <- reactive({
    x <- reactiveValuesToList(input)
  })

  observeEvent(input$add_btn, {counter$n <- counter$n + 1})
  observeEvent(input$rm_btn, {
    if (counter$n > 0) counter$n <- counter$n - 1
  })

  output$counter <- renderPrint(print(counter$n))

  textboxes <- reactive({

    n <- counter$n

    if (n > 0) {
      isolate({
        lapply(seq_len(n), function(i) {
          textInput(inputId = paste0("textin", i),
                    label = paste0("Textbox", i), 
                    value = AllInputs()[[paste0("textin", i)]])
        })
      })
    }

  })

  output$textbox_ui <- renderUI({ textboxes() })

})

shinyApp(ui, server)

编辑：我将lapply()语句包含在内，isolate()因为当您尝试在字段中输入时重新渲染框时，它会变得很烦人

Answer 2

编辑：我读了更多的jQuery示例，并添加了一个代码片段，以执行我认为您要查找的内容。

我不了解jQuery，因此无法充分利用示例链接。我把你想要的猜测，但我认为主要的想法是利用renderUI和uiOutput即使我的建议在这里没有切中要害。

切换ui元素：

如果您特别不想使用shinyjs，则可以执行以下操作：

library(shiny)

ui <- shinyUI(fluidPage(

  actionButton("btn", "Toggle Textbox"),

  textOutput("btn_val"),
  uiOutput("textbox_ui")

))

server <- shinyServer(function(input, output, session) {

  output$btn_val <- renderPrint(print(input$btn))

  textboxToggle <- reactive({

    if (input$btn %% 2 == 1) {
      textInput("textin", "Write something:", value = "Hello World!")
    }

  })

  output$textbox_ui <- renderUI({ textboxToggle() })

})

shinyApp(ui, server)

要添加和删除元素：

在阅读了一些jQuery示例之后，我认为这与您想要的类似：

library(shiny)

ui <- shinyUI(fluidPage(

  sidebarPanel(

      actionButton("add_btn", "Add Textbox"),
      actionButton("rm_btn", "Remove Textbox"),
      textOutput("counter")

    ),

  mainPanel(uiOutput("textbox_ui"))

))

server <- shinyServer(function(input, output, session) {

  # Track the number of input boxes to render
  counter <- reactiveValues(n = 0)

  observeEvent(input$add_btn, {counter$n <- counter$n + 1})
  observeEvent(input$rm_btn, {
    if (counter$n > 0) counter$n <- counter$n - 1
  })

  output$counter <- renderPrint(print(counter$n))

  textboxes <- reactive({

    n <- counter$n

    if (n > 0) {
      lapply(seq_len(n), function(i) {
        textInput(inputId = paste0("textin", i),
                  label = paste0("Textbox", i), value = "Hello World!")
      })
    }

  })

  output$textbox_ui <- renderUI({ textboxes() })

})

shinyApp(ui, server)

这种方法的问题在于，每当您按下添加或删除按钮时，所有输入框都会重新呈现。这意味着您可能对它们所做的任何输入都会消失。

我想您也可以通过以下方式解决此问题：将输入框的当前输入值保存到一个reactiveValues对象中，并使用中的value选项将来自该对象的值设置为重新渲染的输入框的起始值textInput。不过，我暂时将其保留下来。