如何在ReScript中获取表单输入字段的url1与url2值？

DevOps 小满

2026-7-13

问题分析

你遇到的问题核心在于ReactEvent.Form.t是ReScript中通用的表单事件类型，并不包含url1/url2这类具体字段，直接通过.访问会被类型检查器拦截。Form组件提交的values本质是键值对字典结构，需要通过ReScript的字典操作或类型断言来获取对应值。

解决方案

方法1：使用Js.Dict API直接取值

这是最直接的方式，无需额外定义类型，利用字典API按键名获取值：

let onSubmit2URLs = (values: ReactEvent.Form.t) => {
  // 将values转换为字符串类型的字典
  let valuesDict = values->Js.Dict.fromObj
  // 按键名获取值，返回option<string>类型
  let url1 = Js.Dict.get(valuesDict, "url1")
  let url2 = Js.Dict.get(valuesDict, "url2")

  Js.log("These URLs are not a match:")
  Js.log(url1)
  Js.log(url2)
}

注意Js.Dict.get返回option<string>，如果需要处理空值，可通过模式匹配或Option.getExn（生产环境不推荐，需确保字段必传）处理。

方法2：自定义类型+类型断言

如果想用.语法访问字段，可先定义对应表单值的类型，再将values断言为该类型：

// 定义表单值的类型，与表单字段一一对应
type FormValues = {
  url1: string,
  url2: string,
}

let onSubmit2URLs = (values: ReactEvent.Form.t) => {
  // 类型断言，告知编译器values符合FormValues结构
  let formValues = values->Obj.magic: FormValues

  Js.log("These URLs are not a match:")
  Js.log(formValues.url1)
  Js.log(formValues.url2)
}

这种方式更贴合ReScript的类型风格，但要确保表单提交的字段与定义的类型完全一致，避免运行时风险。