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

Question

我正在尝试使用 scalajs-react 为我的简单应用程序构建一个 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 文件中，它工作正常。

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

我们如何做到这一点？我试过了

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

..其中 handleClick 在与上述相同的 Scala 文件中定义。

但它不起作用。

Answer 1

对于作为事件的属性，在 scalajs-react 中你必须使用Callbacks. 文档中的良好入口点是：

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