jbrown jbrown - 3 months ago 8
Scala Question

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

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

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.

Comments