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

2024-03-14

我一直在尝试找到一种解决方案,如何使用闪亮的按钮添加和删除输入字段。我没有源代码,因为我还没有取得太大进展,但是这个 jQuery 示例(http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/ http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/)给出了我想要实现的目标的好主意。这在闪亮中可能吗?或者我应该使用闪亮js来做到这一点?先感谢您!


EDIT:我阅读了更多 jQuery 示例,并添加了一个代码片段,完成我认为您正在寻找的操作。

我不了解 jQuery,所以我无法从示例链接中获得太多信息。我猜测你想要什么,但我认为关键的想法是使用renderUI and 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。不过,我现在将保留它的实现。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • JAXB 异常:此上下文未知类

    当我调用一个特定的静态服务方法时 该方法是使用CXF 我收到以下错误 有人知道为什么以及如何解决它吗 发生 JAXBException 类 com octory ws dto 配置文件Dto也没有任何 其超类的已知 语境 服务方法及相关DT
  • JPA CriteriaBuilder 将合取条件转换为析取条件

    我需要将此查询复制到JPA 标准生成器 code where article client id 1 and article price gt 0 and article code like this is statement or art
  • Windows批处理:睡眠[重复]

    这个问题在这里已经有答案了 如何让 Windows 批处理脚本等待几秒钟 sleep and wait似乎不起作用 无法识别的命令 你可以试试 ping n XXX 127 0 0 1 gt nul 其中 XXX 是等待的秒数加一
  • JPA CriteriaQuery 计算用于 where 谓词的日期时间差

    我正在尝试从数据库中选择两个字段之间的时间差小于或大于某个值的实体 在标准 SQL 中 这可以使用 TIMESTAMPDIFF 函数简单地完成 SELECT from run where TIMESTAMPDIFF SECOND run e
  • numpy 将 RGB 图像转换为 YIQ 颜色空间

    对于一个类 我需要将 RGB 图像转换为 YIQ 我们被告知可以通过以下方式进行转换 我开始编写一个带有循环的凌乱代码来进行矩阵乘法 然后我发现了一个函数 skimage color yiq2rgb imYIQ 当我往里面看他们在做什么时
  • JavaFX 8 日期选择器功能

    我刚刚开始使用新的 JavaFX 8 控件DatePicker In DatePicker 用户体验文档 https wiki openjdk java net display OpenJFX DatePicker User Experie
  • 动态增加列表视图中的元素数量

    我想增加列表视图滚动到末尾时动态显示的项目数量 就我而言 我的列表视图最初将显示 10 个项目 然后 当我们滚动到最后一个项目时 它必须开始显示另外 10 个项目 依此类推 我怎样才能做到这一点 这是我的自定义阵列适配器 package c
  • 无法理解“选项卡”。

    我正在读 C 编程语言 我无法理解第 34 页的练习 1 20 编写一个程序 detab 用适当数量的空格替换输入中的制表符 以分隔到下一个制表位 假设有一组固定的制表位 例如每 n 列 n 应该是变量还是符号参数 第二句话我不明白 让我们
  • Apple Watch 应用程序的 Xcode 7 安装从未完成

    我想尝试一下新的 Apple Watch OS2 打开我现有的项目 添加了目标 更改了捆绑包标识符以删除错误消息 手表应用程序永远不会启动 大约 5 分钟后 我在 Xcode 中收到此错误消息 我还没有添加任何 Swift 代码 我所做的就
  • ZipPackage 类与 Zipfile 类

    我对这两个类感到困惑 它们似乎都用于创建或提取 zip 文件 谁能解释其中的区别吗 ZipPackage Class 实现抽象 Package 基类的派生子类 ZipPackage 类使用 ZIP 存档作为容器存储 这个类不能被继承 Zip
  • DatagridView 如何让每列有不同的行数?

    所以我试图以特定格式显示我的数据datagridview 所以我的格式是这样的 A B C 1 1 1 2 2 x 3 x x x 表示没有单元格 正如您所看到的 每列都有不同的行数 我想在 DatagridView 或 Dot Net F
  • 如何修复错误 - 创建新 Google 表格时参数无效:file.contentType

    我正在尝试在已创建的文件夹中创建新的 Google 表格 但内容类型存在问题 我已经搜索过这个错误 但没有找到任何东西 大多数搜索都会出现MimeType错误 但我不认为这是问题所在 下面是我正在使用的代码 var ss Spreadshe
  • 处理本地化字符串包含单个 TextView 中的链接

    我的 strings xml 文件中有一个字符串 单击该字符串的某些部分会重定向到任务 该部分是根据字符串的索引制作的 现在我正在尝试将其翻译为法语 但我遇到了索引越界异常 因为它的长度小于英语字符串的长度 谁能说一下 处理这种情况的最佳方
  • 如何在Python中调用带有两个参数的函数

    我想问一下如何在 python 中调用带有两个参数的函数 例如 下面的代码是我想调用颜色函数的示例 def color object return 033 1 34m object 033 1 m tes this must be blue
  • 没有公钥的 EF 实体

    我想在 EF 中创建一个没有公钥的实体 支持表具有非唯一的聚集键 但表中的数据从概念上讲没有可以使用的唯一主键 看来EF确实不喜欢这样 有没有什么方法可以让 EF 接受该表没有主键并使其可以使用它 而不会影响性能 我不在乎结果是否是只读的
  • 当 php://temp 多次打开时会发生什么?

    If the php temp or php memory 文件被打开多次 句柄是否会指向同一个文件 或者每个手柄都是独一无二的 我在 php 文档中找不到答案 所以我要去编写一个测试脚本来找出答案 https stackoverflow
  • 将新 ns 映射到旧 ns

    我将 Android Studio 更新到 4 2 1 并删除了 jcentor 在构建项目时出现了这样的警告 我不明白这些 URL 的含义以及如何修复它 映射新的nshttp schemas android com repository
  • Flask 在文件上传时出现错误 400

    我有以下内容
  • 如何在我的发布 aar 中打包多个 AAR

    我们向客户发送 android sdk aar 文件 我们的代码在内部使用我们的存储库中的两个第三方 aar 并且 gradle 在运行时引用它 我的问题是如何将这些依赖项发送给客户 就好像如果我不想给他们那些第 3 方 aar 我怎样才能
  • 如何通过闪亮的按钮动态添加/删除输入字段

    我一直在尝试找到一种解决方案 如何使用闪亮的按钮添加和删除输入字段 我没有源代码 因为我还没有取得太大进展 但是这个 jQuery 示例 http www mkyong com jquery how to add remove textbo