Scalajs-react如何在点击提交按钮时调用自定义方法并获取表单值

问题原因 #

你的实现不生效主要有三个核心问题：

1. scalajs-react的所有DOM属性、事件回调都需要加^.前缀，且事件回调需要用==>操作符绑定，不能直接赋值
2. 表单默认提交行为会触发页面刷新，会中断你的自定义逻辑执行，必须先阻止默认行为
3. 直接监听submit按钮的点击事件会漏掉用户按回车提交表单的场景，更推荐监听<form>标签的submit事件

完整实现方案 #

第一步：定义提交回调方法

首先在你的Scala文件中引入必要依赖，编写带参数的回调方法，先阻止默认行为再读取表单值：

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._

def handleSubmit(e: ReactEventFromForm): Unit = {
  // 阻止表单默认刷新页面的行为
  e.preventDefault()
  // 获取表单DOM实例
  val form = e.target.asInstanceOf[org.scalajs.dom.html.Form]
  // 读取两个输入字段的值
  val recipeName = form("nameOfTheRecipe").asInstanceOf[org.scalajs.dom.html.Input].value
  val steps = form("steps").asInstanceOf[org.scalajs.dom.html.TextArea].value
  // 此处添加你自己的业务逻辑，比如数据提交、状态更新等
  println(s"食谱名称：$recipeName，制作步骤：$steps")
}

第二步：修改模板绑定事件

将提交事件绑定到form标签上，修改你的页面代码如下：

<.div(
  <.p("Welcome to foodland!"),
  <.form(
    ^.onSubmit ==> handleSubmit, // 绑定表单提交事件
    <.label("Name of the recipe:",
      <.input.text(^.name := "nameOfTheRecipe")),
    <.br,
    <.label("How to make it:",
      <.textarea(^.name := "steps")),
    <.br,
    <.input.submit(^.value := "Submit")
  )
)

如果确实需要绑定到按钮的点击事件，写法如下：

// 按钮代码
<.input.submit(^.value := "Submit", ^.onClick ==> handleClick)

// 对应的回调方法
def handleClick(e: ReactMouseEventFromInput): Unit = {
  e.preventDefault()
  // 读取表单值的逻辑和上面一致
}

内容的提问来源于stack exchange，提问作者Mandroid