Scalajs-react:如何在单击按钮时调用自定义方法？

Question

我正在尝试使用scalajs为我的简单应用程序构建一个HTML页面，下面是我的工作：

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

我已经把它放在我的Scala文件中了，它运行得很好。

现在，当用户单击“Submit”按钮时，我想调用一个方法，其中我想访问表单中的输入字段。

我们该怎么做？我试过

<.input.submit(^.value:="Submit",onClick = handleClick)

..where handleClick与上面的Scala文件相同。

但不起作用。

Answer 1

对于属于事件的属性，在scalajs中，您必须使用Callback。

• VDOM事件处理程序
• 回调创建

在您的例子中，如下所示：

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