单击按钮后处理文本区域的内容

Question

在学习 Fable 和 Elmish 时，我认为处理用户输入并对其进行处理是一个很好的练习。所以我尝试创建一个文本区域和一个按钮，如果按下该按钮，则应提交来自文本区域的输入。但是，我真的很困惑如何从 textarea 中获取值。这是我的开胃菜：

type Model = string
type Msg = UserInput of string

let init () : Model = ""

let update (msg: Msg) (_: Model) =
    let UserInput x = msg
    x

let view (model: Model) dispatch =
    div [] [ textarea [] []
             button [] [str "submit"]
             div [] [str model] ]

理想情况下，如果用户在文本区域中输入一些文本并按下提交按钮，我想在底部的 div 中回显用户输入。知道如何解决这个问题吗？

Answer 1

您似乎在使用 Elmish。请注意，这是 React 绑定之上的一个额外层，它非常自以为是！您也可以直接编写 React 组件或使用替代系统，例如 Feliz，它看起来更像带钩子的现代 TypeScript。

关于你的问题。你需要做两件事：

每次用户更改 textarea 值时发送 一条消息
根据模型设置textarea的值

open Fable.Core.JsInterop
open Fable.React

type Model = string
type Msg = UserInput of string

let init () : Model = ""

let update (msg: Msg) (_: Model) =
    let (UserInput x) = msg
    x

let view (model: Model) dispatch =
    div 
      [] 
      [ 
        textarea 
          [
            Props.Value model
            Props.OnChange 
              (fun e -> e.target?value |> UserInput |> dispatch)
          ] 
          []
        button [] [str "submit"]
        div [] [str model] 
      ]

单击按钮后处理文本区域的内容

Processing content of textarea once button is clicked

fable-f#