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

【问题标题】：Scalajs-react: How to invoke a custom method on button click?Scalajs-react：如何在单击按钮时调用自定义方法？
【发布时间】：2021-11-15 00:24:24
【问题描述】：

我正在尝试使用 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 文件中。

但它不起作用。

【问题讨论】：

标签： scala scala.js scalajs-react

【解决方案1】：

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

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

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

【讨论】：