elm - 在外部单击时隐藏组件

Question

在应该隐藏该组件的单个组件之外处理单击的正确方法是什么？

这样的组件的示例可以是下拉菜单，日期选择器等。我们通常希望它们在我们单击外部时隐藏。但是要这样做，似乎我们必须执行一些“不纯正”的骇客，我不确定该如何避免以FRP风格出现。

我搜索了相关的React示例以获取想法，并找到了this，但它们似乎都依赖于将回调附加到全局对象，然后再修改内部组件的状态。

Answer 1

下面的示例执行与您描述的操作类似的操作。
modal带有一个地址(向其发送“dismiss”事件发送到)，当前窗口尺寸和一个elm-html Html组件(这是要重点关注的东西，如日期选择器或表单)。

我们将点击处理程序附加到周围的元素上；为其指定适当的ID后，我们可以确定收到的点击是否适用于它或 child ，然后将其适当转发。唯一真正聪明的地方是部署customDecoder来过滤掉子元素上的点击。

在其他地方，接收到“dismiss”事件后，我们的模型状态发生变化，因此我们不再需要调用modal。

这是一个相当大的代码示例，使用了很少的elm程序包，因此请询问是否需要进一步说明

import Styles exposing (..)

import Html exposing (Attribute, Html, button, div, text)
import Html.Attributes as Attr exposing (style)
import Html.Events exposing (on, onWithOptions, Options)
import Json.Decode as J exposing (Decoder, (:=))
import Result
import Signal exposing (Message)


modal : (Signal.Address ()) -> (Int, Int) -> Html -> Html
modal addr size content = 
    let modalId = "modal"
        cancel = targetWithId (\_ -> Signal.message addr ()) "click" modalId
        flexCss = [ ("display", "flex")
                  , ("align-items", "center")
                  , ("justify-content", "center")
                  , ("text-align", "center")
                  ]
    in div (
            cancel :: (Attr.id modalId) :: [style (flexCss ++ absolute ++ dimensions size)]
           ) [content]

targetId : Decoder String
targetId = ("target" := ("id" := J.string))        

isTargetId : String -> Decoder Bool
isTargetId id = J.customDecoder targetId (\eyed -> if eyed == id then     Result.Ok True else Result.Err "nope!") 

targetWithId : (Bool -> Message) -> String -> String -> Attribute
targetWithId msg event id = onWithOptions event stopEverything (isTargetId id) msg

stopEverything = (Options True True)