HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了有条件地在Elm的表单提交上切换`preventDefault`大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法在表单提交上有条件地切换preventDefault?
我在下面尝试过使用onWithOptions,但似乎只使用了第一个设置,即使我在模型上有名称时可以看到它使用Debug.log进行更改.
,onWithOptions
    "submit"
    (if model.name == "" then
        (Debug.log "prevent" { preventDefault = True,stopPropagation = True })
      else
        (Debug.log "allow" { preventDefault = false,stopPropagation = false })
    )
    (Json.succeed FormSubmit)

更新了答案的结果

正如@Tosh所说,隐藏按钮可以解决问题:

,button
    [ onPreventClickHtml FormSubmit,Html.Attributes.hidden (model.name == "" |> not) ]
    [ text " prevent" ],button
    [ onClick FormSubmit,Html.Attributes.hidden (model.name == "") ]
    [ text "allow" ]

onPreventClickHtml在哪里:

onPreventClickHtml : Msg -> Attribute Msg
onPreventClickHtml msg =
    onWithOptions
        "click"
        { preventDefault = True,stopPropagation = True }
        (Json.succeed msg)

有条件地显示按钮不起作用:

,(if model.name == "" then
    button
        [ onPreventClickHtml FormSubmit ]
        [ text " prevent" ]
  else
    button
        [ type' "submit",onClick FormSubmit ]
        [ text "allow" ]
  )

我正在使用elm-mdl,因此发现实施解决方案更具挑战性,因为根据我的经验创建自定义onclick需要elm-mdl未公开的类型,因此需要重复.

,if model.name == "" then
    Material.options.nop
  else
    Material.options.css "visibility" "hidden",onPreventClick FormSubmit,if model.name == "" then
    Material.options.css "visibility" "hidden"
  else
    Material.options.nop,Button.onClick FormSubmit



onPreventClick : Msg -> Property Msg
onPreventClick message =
    Material.options.set
        (\options -> { options | onClick = Just (onPreventClickHtml messagE) })

-- Duplicated from elm-mdl
type alias Property m =
    Material.options.Property (Config m) m

-- Duplicated from elm-mdl
type alias Config m =
    { ripple : Bool,onClick : Maybe (Attribute m),disabled : Bool,type' : Maybe String
    }

另一种适用于我的场景的方法是更改​​按钮类型:

,if model.name == "" then
    Button.type' "reset"
  else
    Button.type' "submit"

解决方法

一个简单的解决方案建议,直到有人可以告诉我们如何解决它.

如何创建两个按钮(如您所示,具有不同的选项)并根据条件仅显示其中一个?您可以使用Html.Attributes.hide.

大佬总结

以上是大佬教程为你收集整理的有条件地在Elm的表单提交上切换`preventDefault`全部内容,希望文章能够帮你解决有条件地在Elm的表单提交上切换`preventDefault`所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。