我们需要管理 Elm 中单选按钮的状态吗？答案

【问题标题】：Do we need to manage the state of radio buttons in Elm?我们需要管理 Elm 中单选按钮的状态吗？
【发布时间】：2018-05-28 08:40:15
【问题描述】：

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

在我自己的小 Elm 项目中，我需要做一些类似的事情

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

如果不管理checked 属性，所有单选按钮将在您单击后保持选中状态。

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

【问题讨论】：

如果您将name 属性添加到所有“分组”单选元素，您的网络浏览器将一次只允许选择一个。您可以通过管理模型中的“已检查”状态在 Elm 中实现相同的目的。但是，如果您不在 Elm 中管理它们的状态，Elm 将无法“读取”当前处于活动状态的状态。

标签： elm

【解决方案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
    ]

（我在radio 中添加了一个Bool 参数）

【讨论】：