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)
  }
}

Please post a more focused code snippet. You've posted about 60 lines that I have to wade through when the error can be reproduced easily in 2 lines — nafg, Aug 29 '16 at 18:08
Please include the exact error message. "can't be resolved" isn't very clear. — nafg, Aug 29 '16 at 18:09
"sri & scala-react/scala-js" -- there isn't a separate thing called "scala-react" here, there's a library called scala-js-react that's an alternative to Sri that you aren't using — nafg, Aug 29 '16 at 18:12

score 1 · Accepted Answer · answered Aug 29 '16 at 18:11

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.

answered Aug 29 '16 at 18:11

nafg

2,424
27
25

Thanks for your reply, and sorry I couldn't be more precise, but I was just getting an error in intellij. I've made your change but still get an error "class Component needs to be abstract, since it has 3 unimplemented members.", then it goes on to say `bodyRef_`, `emailRef_` and `nameRef_` aren't overridden. – jbrown Aug 30 '16 at 08:43
Ah hang on, that might be me being dense – jbrown Aug 30 '16 at 08:49

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

1 Answers1