在Elm中使用onInput的几个输入和参数

Question

我正在和榆树做一点实验.现在我在屏幕上有几个输入范围,我想单独控制它们的值,但我不知道如何区分它们(在Js中我会在onInput回调中发送ID和输入的VALUE)我只能用Elm的onInput发送一个参数

inp : Input -> Html Msg
inp inp =
    div [ class "input" ]
        [ p [] [ text inp.name ]
        , input [ id (toString inp.id), type' "range", value inp.volume, onInput ChangeInput ] []
        , controls inp.name inp.id
        ]

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Play id ->
            ( play model id, Cmd.none )

        ChangeInput id value ->
            -- Here I want to grab the id and the value coming from the input --

        NoOp ->
            ( model, Cmd.none )

有帮助吗？谢谢!!

Answer 1

您的消息定义应该是:

type Msg =
  ...
  | ChangeInput Id String

这给它一个签名(Id -> String -> Msg).需要一个Id和一个String,它返回一个Msg.消息包括id和string.

您可以通过在视图中进行以下更改来提供自己的其他参数:

onInput (ChangeInput id)

该公式(ChangeInput id)是部分应用:

您不提供所有参数,只提供一个参数,因此结果将是一个函数,它接收剩余的参数,并输出Msg类型.

你已经提供了Id消息(Id -> String -> Msg),所以剩下的签名将是(String -> Msg),这正是onInput寻找的.