Question

我是Elm的新手。下拉值更改后，我将无法调用更新函数。

场景：我有两个下拉列表Grade和Environment。我想要的是，当Grade下拉列表值更改时，Environment下拉列表的选项将相应地更改。

例如，如果Grade的下拉值为3，则Environment的选项应更改为Imagine Math

    gradeDropdown : String -> List String -> Html Msg
    gradeDropdown grade grades =
        let
            buildOption =
                gradeOption grade
        in
            select [ class "importWizard--gradeSelection", name "gradeSelection", onChange (UpdateStudent Grade) ]
                (map buildOption grades)

    gradeOption : String -> String -> Html Msg
    gradeOption optSelectedVal temp =
        let
            optSelected =
                temp == optSelectedVal
        in
            option [ value temp, selected optSelected ] [ text temp ]

    environmentDropdown : Model -> String -> List String -> String -> Html Msg
    environmentDropdown model learningEnvironment learningEnvironments selectedGrade =
        let
            buildOption =
                environmentOption model learningEnvironment
            blueprint_grades = ["PreKindergarten", "Kindergarten", "1"]
            environmentDropdownOption =
              if (selectedGrade == "" || (List.member selectedGrade blueprint_grades)) then
                ["Blueprint"]
              else if (selectedGrade == "2") then
                learningEnvironments
              else
                ["Imagine Math"]
        in
            select [
              class "importWizard--learningEnvironmentSelection"
              , name "learningEnvironmentSelection"
              , onChange (UpdateStudent LearningEnvironments)
            ]
            (map buildOption environmentDropdownOption)

    environmentOption : Model -> String -> String -> Html Msg
    environmentOption model optSelectedVal temp =
        let
            optSelected =
                temp == optSelectedVal
        in
            option [ value temp, selected optSelected ] [ text temp ]

并在更新

中

update : Flags -> Msg -> Model -> ( Model, Cmd Msg )
    update flags message model =
        case message of
            UpdateStudent updateType newValue ->
                let
                    validate =
                        validateStudent flags validatableFieldsForScreen
                in
                    case updateType of
                        LastName ->
                            ( validate { model | lastName = newValue } <| Just LastNameField, Cmd.none )

                        FirstName ->
                            ( validate { model | firstName = newValue } <| Just FirstNameField, Cmd.none )

                        Sin ->
                            ( validate { model | sin = newValue } <| Just SinField, Cmd.none )

                        Grade ->
                            ( validate { model | grade = newValue, selectedGrade = newValue } Nothing, Cmd.none )

                        LearningEnvironments ->
                            ( validate { model | learningEnvironments = newValue } Nothing, Cmd.none )

查看：

, td [ class wizardTableInput ] [ gradeDropdown model.grade flags.grades ]
, td [ class wizardTableInput ] [ environmentDropdown model model.learningEnvironments flags.learningEnvironments model.selectedGrade ]

在此代码中，环境下拉列表的值正在更改，但是模型的值未更新。据我了解，我可以看到环境下拉列表的ID已重新呈现，但它没有更新模型的learningEnvironments值。这意味着它没有执行与update相匹配的LearningEnvironments函数。

Answer 1

select小部件，其中选项更改是Html.Keyed.node的用例之一

使用像下面这样的助手功能：

keyedSelect : (String -> a) -> String -> List ( String, String ) -> Html a
keyedSelect message selectedValue kvs =
    let
        toOption ( k, v ) =
            ( k
            , option
                [ value k
                , selected (k == selectedValue)
                , disabled (k == "-1")
                ]
                [ text v ]
            )
    in
    Keyed.node "select"
        [ class "form-control", onChange message ]
        (List.map toOption kvs)

如果用户从不选择任何选项，通常我会优先选择"Please select Foo"，其值为-1。这就是代码检查-1并禁用该选项的原因。如果不需要，可以删除disabled属性。

当下拉列表的值更改时，Elm`update`不执行case语句

1 个答案: