首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >你是如何在萨维寓言中使用createRef的?

你是如何在萨维寓言中使用createRef的?
EN

Stack Overflow用户
提问于 2019-05-08 05:44:28
回答 2查看 188关注 0票数 2

我有一个文本输入,并且我已经设法去掉了输入。但是,我的按键侦听器不会在处理Enter键之前等待文本输入事件刷新,这将结束编辑,而不会在不受控制的组件中获得最新的值。

因为我在webpack,所以React...是未定义的,所以我不能简单地React.createRef(),当前源代码显示函数存在https://github.com/fable-compiler/fable-react/blob/e904add886bab45003c074cd2b06b8834fddf65b/src/Fable.React.Helpers.fs#L366

但是,它不能解析/编译。paket.lock显示Fable.React 4.1.3,Fable.Elmish.React 2.1。

EN

回答 2

Stack Overflow用户

发布于 2019-05-12 04:16:31

createRef只有在5.x版本以后才可用,所以你需要更新到最新版本。可以肯定的是,我鼓励您在编写5.2.3时升级到最新版本。

这意味着你需要将你的应用升级到Fable.Core v3,你可以在here上阅读更多关于它的信息。

完成后,您可以像这样使用createRef

代码语言:javascript
复制
open Fable.React
open Fable.React.Props

type MapComponent(initProps) =
    inherit Fable.React.Component<MapComponentProps, obj>(initProps)

    let mapRef : IRefHook<Browser.Types.HTMLDivElement option> = createRef None

    override this.render() =
        div [ RefValue mapRef ]
            [ str "..." ]
票数 3
EN

Stack Overflow用户

发布于 2019-05-14 21:13:06

事实证明,对于我所需要的,裁判并不是必要的,但是我确实得到了一个。

代码语言:javascript
复制
type IReactRef =
  inherit Browser.Element

[<Emit("React.createRef")>]
let createRef(): IReactRef = jsNative

type TextInputProps =
  { Ident: string
    Delay: int
    AddedAttributes: IHTMLProp list
    DefaultValue: string option
    OnChange: (string -> unit)
    OnEscape: (unit -> unit) option
    OnEnter: (string -> unit) option
  }

type TextInputState = InputState
let textInputDelayDefault = 500
type TextInputComponent(props) =
  inherit React.Component<TextInputProps, TextInputState>(props)
  let mutable textInput: obj = null
  let debouncer = Eventing.Debouncer<string>.Create props.Ident props.Delay

  do
    textInput <- react.createRef()
    base.setInitState InputState

  member __.TextInput: IReactRef option =
    textInput
    |> Option.ofObj
    |> Option.map unbox

  // provide cancel edit extension point (Escape doesn't fire keypress)
  member this.OnKeyUp(e: React.KeyboardEvent) =
    if e.key = "Escape" then
      match this.props.OnEscape with
      | Some f ->
        e.preventDefault()
        f()
      | None -> ()

  // provide finish edit extension point
  member this.OnKeyPress(e: React.KeyboardEvent) =
    let value =
      e
      |> unbox
      |> Eventing.getTargetValue
    if e.key = "Enter" then
      this.props.OnEnter
      |> Option.iter (fun f ->
           e.preventDefault()
           debouncer.Clear()
           // send the current value in case the onChange did not send the current value due to debouncing
           f value)

  override this.render() =
    let r =
      input [ yield R.Props.Ref(unbox textInput)
              yield R.Props.OnKeyPress this.OnKeyPress
              yield R.Props.OnKeyUp this.OnKeyUp
              yield Eventing.onDebChange debouncer this.props.OnChange
              yield R.Props.DefaultValue(this.props.DefaultValue |> Option.defaultValue "")
              yield! this.props.AddedAttributes ]
    r

let inline textInputComponent props = Fable.Helpers.React.ofType<TextInputComponent, _, _> props []
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56030863

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档