Elm 将 onInput 与数字一起使用

Question

当我的模型是 String 类型时，

onInput 工作正常。但是，如果我希望用户输入 Int onInput，则会出现以下错误：

 Function `onInput` is expecting the argument to be:
      String -> msg
  But it is:
      Int -> Msg

下面是我的代码

view : Model -> Html Msg
view model =
    div []
        [ input [type_ "text", placeholder "Id", onInput Msgs.NewPlayerId] []
        , input [type_ "text", placeholder "Name", onInput Msgs.NewPlayerName ] []
        , input [type_ "number", placeholder "Level", onInput Msgs.NewPlayerLevel ] []
        , button [ onClick Msgs.Submit ] [ text "submit" ]
        ]

是否有接受 Int 或 Float 的内置 onInput 变体？

Answer 1

如果您重新定义 Msgs.NewPlayerLevel 以接受 Result String Int 来解释玩家可以输入非数字内容的事实，您可以这样做：

type Msg
    = ...
    | NewPlayerLevel (Result String Int)

您的 onInput 呼叫将是：

onInput (NewPlayerLevel << String.toInt)

String.toFloat也可以这样做。

在 update 函数中，您将处理新消息类型的 Ok 和 Err 两种情况

update msg model =
  case msg of
    ...

    NewPlayerLevel (Ok level) ->
      { model | level = Just level, levelError = Nothing }

    NewPlayerLevel (Err err) ->
      { model | level = Nothing, levelError = Just err }

假设您有这样的模型

type alias Model =
    { ...
    , level : Maybe Int
    , levelError : Maybe String
    }

Answer 2

除了@chad-gilbert 提供的解决方案外，您还可以提供一个函数String -> Msg，根据结果发送不同的Msg。例如：

type Msg
    = ...
    | NewPlayerLevel Int
    | IncorrectInput String

newPlayerLevelInput : String -> Msg
newPlayerLevelInput input =
    case String.toInt input of
        Ok int -> NewPlayerLevel int
        Err error -> IncorrectInput error

在您的 input 函数中，您将使用 onInput newPlayerLevelInput 作为属性。

Elm 将 onInput 与数字一起使用

Elm forms onInput usage with numbers

functional-programming

web

elm