0

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

在以下代码中，onClick无法解析处理程序。我怀疑它需要一个类型注释或其他东西，但我已经从一个示例中复制了它（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)
  }
}
4

1 回答 1

1

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

我希望尽快在 Sri 中解决这个问题，Gd 愿意，这样你的代码就可以工作了。

于 2016-08-29T18:11:16.943 回答