r - Shiny 的初始 textAreaInput 值和每次按下按钮后的 react

Question

描述

我有一个 textAreaInput 框，我希望它以默认值开始。用户可以单击 2 个actionButtons(提交 和随机评论)。 Submit 更新来自 textAreaInput 的评论以进行进一步处理(绘图等)，同时 Random Comment 发送一个新的随机值到 textAreaInput (用户也可以在 textAreaInput 框中键入)。我几乎完成了，但在按下 Submit 按钮之前，无法让应用程序更新 textAreaInput 的 value。

问题

我希望它在按下 Random Comment 时更新，但仍允许用户删除文本框并键入他们自己的文本。如何让应用执行此操作？

MWE

library(shiny)
library(shinyjs)
library(stringi)

shinyApp(
    ui = fluidPage(
      column(2,
        uiOutput("randcomment"),
        br(),
        div(
            actionButton("randtext", "Random Comment", icon = icon("quote-right")),
            div(actionButton("submit", "Submit", icon = icon("refresh")), style="float:right")
        )

      ),
      column(4, div(verbatimTextOutput("commenttext"), style = 'margin-top: 2cm;'))
    ),
    server = function(input, output) {

        output$randcomment <- renderUI({
            commentUi()
        })

        comment_value <- reactiveValues(default = 0)

        observeEvent(input$submit,{
            comment_value$default <- input$randtext
        })

        renderText(input$randtext)

        commentUi <- reactive({

            if (comment_value$default == 0) {
                com <- stri_rand_lipsum(1)
            } else {
                com <- stri_rand_lipsum(1)
            }

            textAreaInput("comment", label = h3("Enter Course Comment"), 
                value = com, height = '300px', width = '300px')
        })

        output$commenttext <- renderText({ input$comment })


    }
  )

Answer 1

我会以不同的方式处理这个问题。我会使用 reactiveValues 来填充这两个字段，然后使用两个 observeEvents 来控制 reactiveValues 的内容。

我认为在这种情况下您根本不需要 reactive。 reactive 在您需要立即处理时非常有用。如果您想控制值何时被处理，请使用 reactiveValues。

library(shiny)
library(shinyjs)
library(stringi)

shinyApp( 
  ui = fluidPage(
    column(2,
           uiOutput("randcomment"),
           br(),
           div(
             actionButton("randtext", "Random Comment", icon = icon("quote-right")),
             div(actionButton("submit", "Submit", icon = icon("refresh")), style="float:right")
           )

    ),
    column(4, div(verbatimTextOutput("commenttext"), style = 'margin-top: 2cm;'))
  ),
  server = function(input, output) {

    # Reactive lists -------------------------------------------------------
    # setting the initial value of each to the same value.
    initial_string <- stri_rand_lipsum(1)
    comment_value <- reactiveValues(comment = initial_string,
                                    submit = initial_string)

    # Event observers ----------------------------------------------------
    observeEvent(input$randtext,
      {
        comment_value$comment <- stri_rand_lipsum(1)
      }
    )

    # This prevents the comment_value$submit from changing until the 
    # Submit button is clicked. It changes to the value of the input
    # box, which is updated to a random value when the Random Comment
    # button is clicked.
    observeEvent(input$submit,
      {
        comment_value$submit <- input$comment
      }
    )

    # Output Components -------------------------------------------------
    # Generate the textAreaInput
    output$randcomment <- renderUI({
      textAreaInput("comment", 
                    label = h3("Enter Course Comment"), 
                    value = comment_value$comment, 
                    height = '300px', 
                    width = '300px')
    })

    # Generate the submitted text display
    output$commenttext <- 
      renderText({ 
        comment_value$submit 
      })
  }
)

对您的代码的一些评论

我在确定您的代码在做什么时遇到了一些困难。部分原因是您的服务器功能组织得有点困惑。你的组件是

• 输出
• react 列表
• 观察者
• 输出(但没有分配给槽...多余的)
• react 对象
• 输出

我建议将您的 react 分组在一起，将您的观察者分组在一起，并将您的输出分组在一起。如果您有真正独立的系统，您可以将系统分成不同的代码部分，但让它们遵循类似的模式(我会声称这两个框是同一系统的一部分)

你的 commentUi 响应式(Reactive)有一个奇怪的 if-else 结构。它总是将 com 设置为随机字符串。更重要的是，if-else 构造并不是真正必要的，因为您的代码中没有任何地方更新过 comment_value$default——它始终为 0。它看起来像您可能一直在尝试将其作为操作按钮的基础，然后(正确地)得出结论认为这不是一个很好的选择。

此外，我建议不要在 react 对象中构建 UI 组件。如果它们返回值然后在 render 函数系列中构建任何 UI 组件，您会发现您的响应式(Reactive)更加灵活和有用。