如何使用 sri / scala-react 创建点击回调？

Question

我正在尝试使用 sri & scala-react/scala-js 为 React 组件创建点击处理程序。

在下面的代码中，无法解析 onClick 处理程序。我怀疑它需要类型注释或其他东西，但我已经从示例中复制了它（在 page 上搜索 tick）。

这是我的代码：

package demo.web.screens

import org.scalajs.dom
import demo.web.styles.GlobalStyle
import shared.contactform.ContactForm
import sri.core._
import sri.scalacss.Defaults._
import sri.web.all._
import sri.web.vdom.htmltags._

import scala.scalajs.js
import scala.scalajs.js.annotation.ScalaJSDefined

object ContactScreen {

  @ScalaJSDefined
  class Component extends ReactComponent[Unit, Unit] {

    var bodyRef: dom.html.Input
    var nameRef: dom.html.Input
    var emailRef: dom.html.Input

    def handleClick(e: ReactMouseEventI) = {
      Option(bodyRef).foreach { body =>
        val form = ContactForm(body = body.value,
          name = Option(nameRef).map(_.value),
          email = Option(emailRef).map(_.value))

        println(s"Inside click handler with form: $form")
      }
    }

    def render() = {
      dom.console.log("In contact screen")

      val contactForm = ContactForm(body = "static body", name = None, email = None)
      println(s"contact form = $contactForm")

      form()(
        div(className = GlobalStyle.flexOneAndCenter)(
          span(className = GlobalStyle.bigText)("Contact us"),
          label()("Your name",
            input(id = "name", ref = (e: dom.html.Input) => nameRef = e)),
          label()("Your email address",
            input(`type`="email", id = "email",
              ref = (e: dom.html.Input) => emailRef = e)),
          label()("Comments",
            textarea(id = "body", ref = (e: dom.html.Input) => bodyRef = e)()),
          button(id = "submit", onClick = handleClick _)("Submit")
        )
      )
    }
  }

  val constructor = getTypedConstructor(js.constructorOf[Component], classOf[Component])

  def apply(key: js.UndefOr[String] = js.undefined,
            ref: js.Function1[Component, _] = null) = {
    createElementNoProps(constructor, key = key, ref = ref)
  }
}

Answer 1

您没有包含错误消息，但我相信您必须写 button(id = "submit", onClick = handleClick(_: ReactMouseEventI))("Submit") 或 button(id = "submit", onClick = (evt: ReactMouseEventI) => handleClick(evt))

我希望尽快在 Sri 中修复此问题，愿上帝保佑，这样您的代码才能正常工作。

如何使用 sri / scala-react 创建点击回调？

How to create a click callback with sri / scala-react?

scala

scala.js

scalajs-react