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 文件中了，它工作正常。

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

我们该怎么做？我试过

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

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

但是不行。

Answer 1

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

• VDOM Event Handlers
• Callback creation

在您的情况下，它将如下所示：

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