Scalajs-react: How to invoke a custom method on button click? - scala

Question

I am trying to build a HTML page for my simple application using scalajs-react, and here is my effort:
<.div(
<.p("Welcome to foodland!"),
<.form(
<.label("Name of the recipe:",
<.input.text(^.name := "nameOfTheRecipe")),
<.br,
<.label("How to make it:",
<.textarea(^.name := "steps")),
<.br,
<.input.submit(^.value:="Submit")
)
)
I have put this in my Scala file, and it works fine.
Now I want to invoke a method when user clicks on 'Submit' button, wherein I would like to access the input fields in the form.
How do we do that? I tried with
<.input.submit(^.value:="Submit",onClick = handleClick)
..where handleClick is defined in the same Scala file as above.
But it doesn't work.

Answer 1

For attributes that are events, in scalajs-react you have to use Callbacks. Good entry points in the documentation are:
VDOM Event Handlers
Callback creation
In your case, it would look like the following:
def buildDiv = {
val div = <.div(
<.p("Welcome to foodland!"),
<.form(
<.label("Name of the recipe:",
<.input.text(^.name := "nameOfTheRecipe")),
<.br,
<.label("How to make it:",
<.textarea(^.name := "steps")),
<.br,
<.input.submit(^.value:="Submit", ^.onClick --> handleClick)
)
)
}
val handleClick = Callback {
println("the button was clicked")
}