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

Question

I'm trying to create a click handler for a react component using sri & scala-react/scala-js.

In the following code, the onClick handler can't be resolved. I suspect it takes a type annotation or something, but I've copied it from an example (search for tick on this page).

Here's my code:

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

You haven't included the error message but I believe you have to write button(id = "submit", onClick = handleClick(_: ReactMouseEventI))("Submit") or button(id = "submit", onClick = (evt: ReactMouseEventI) => handleClick(evt))

I hope to fix this in Sri soon, G-d willing, so that code like yours just works.