Question

我在http://elm-lang.org/examples/radio-buttons中提到这个例子。我没有看到按钮状态被管理的任何地方。

在我自己的小榆树项目中，我需要做一些像

这样的事情

label []
    [ input
        [ type_ "radio"
        , checked (model.choosenSize == size)
        , onClick (SetSize size)
        ] []
    , text (sizeToString size)
    ]

如果不管理checked属性，点击后所有单选按钮都会保持检查状态。

那么示例中的魔力是什么？

Answer 1

您所指的示例非常简单。它没有明确地管理按钮的状态。相反，他们的状态由浏览器管理。当然，在实际应用程序中，您可以更好地明确管理它。类似的东西：

view : Model -> Html Msg
view model =
  div []
    [ fieldset []
        [ radio "Small" (model.fontSize == Small) (SwitchTo Small)
        , radio "Medium" (model.fontSize == Medium) (SwitchTo Medium)
        , radio "Large" (model.fontSize == Large) (SwitchTo Large)
        ]
    , Markdown.toHtml [ sizeToStyle model.fontSize ] model.content
    ]


radio : String -> Bool -> msg -> Html msg
radio value isChecked msg =
  label
    [ style [("padding", "20px")]
    ]
    [ input [ type_ "radio", checked isChecked, name "font-size", onClick msg ] []
    , text value
    ]

（我在Bool）

添加了radio参数

我们需要管理榆树中的单选按钮状态吗？

1 个答案: