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

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