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" ]
        ]

是否有onInput的内置变体接受Ints或Floats？

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用法

2 个答案: