functional-programming - How do you dynamically create inputs in Elm?

Question

I want to create a button which, when pressed, adds a new input (or textarea) to the form.

Answer 1

如果您希望每次单击按钮时都添加一个文本字段，这意味着您希望显示的文本字段数等于单击按钮的次数。countIf id我们可以创建一个信号，通过使用按钮上的信号¹来告诉我们按钮被点击的clicked频率。

如果我们有一个输入列表，我们可以使用flow将它们显示在彼此下方（或旁边）。n编写一个接受数字并生成包含按钮和n文本字段的列表的函数是相当直接的。

所以现在我们可以使用lift这个函数来连接我们计算按钮点击次数的信号，将它与flow函数结合起来，瞧，我们有一个动态创建输入的按钮。

(btn, clicked) = Input.button "Click me!"

-- Count how often the clicked signal is true
clicks = countIf id clicked

main = lift2 flow (constant down) $ lift nInputs clicks

nInputs n =
  let helper n acc =
    if n<=0 then btn : acc
    else
      -- Input.textField returns a pair containing the field as well as a signal
      -- that you can use to access the field's contents. Since I don't actually
      -- ever do anything with the contents, I just ignore the signal here.
      -- In your real code, you'd probably want to keep the signal around as well.
      let (field, _) = Input.textField $ "input " ++ (show n)
      in helper (n-1) $ field : acc
  in helper n []

¹ 仅使用count会计算信号变化的频率。由于每次点击都会使信号的值变为 true，然后又变为 false，因此每次点击会发生 2 次变化。通过使用countIf id，我们只计算信号为真的次数，从而计算点击次数。

Answer 2

从 Elm 0.8 开始，这确实可以做到。请参阅发布公告、在线参考的输入组部分和代码示例。