如何在Rescript React组件中获取表单提交的FormData？

要解决你的问题，按以下步骤调整代码即可：

关键要点 #

• 表单输入框必须添加name属性，FormData依赖该属性识别字段
• 需要将React事件返回的target转换为具体的HtmlFormElement类型
• 使用库提供的Webapi.Dom.HtmlFormElement.data或Webapi.FormData.makeWithForm获取表单数据

修改后的完整代码 #

@react.component
let make = () => {
  let (todos, updateTodos) = Jotai.Atom.useAtom(State.todos)

  let addTodo = evt => {
    ReactEvent.Form.preventDefault(evt)
    // 将事件目标转换为HtmlFormElement类型
    let formElem = ReactEvent.Form.target(evt)->Webapi.Dom.HtmlFormElement.ofEventTargetExn

    // 通过表单元素获取FormData（对应文档提示的用法）
    let formData = Webapi.Dom.HtmlFormElement.data(formElem)

    // 获取输入框的值（注意这里的"todoText"要和input的name属性一致）
    switch Webapi.FormData.get(formData, "todoText") {
    | Some(todoText) if todoText->Js.String.trim->Js.String.length > 0 =>
        // 生成新todo并更新列表（假设todo类型包含id和text字段）
        let newTodo = {id: Js.Date.now()->Int.fromFloat, text: todoText}
        updateTodos(oldTodos => Belt.Array.concat(oldTodos, [newTodo]))
        // 提交后清空表单
        Webapi.Dom.HtmlFormElement.reset(formElem)
    | _ => () // 忽略空输入
    }
  }

  <>
    <h1> {React.string("Welcome to the TODO App")} </h1>
    <form onSubmit={addTodo} style={ReactDOM.Style.make(~display="flex", ())}>
      {/* 给input添加name属性，这是FormData识别字段的核心 */}
      <input 
        type_="text" 
        name="todoText"
        placeholder="Enter todo content..."
        style={ReactDOM.Style.make(~display="block", ())} 
      />
      <button style={ReactDOM.Style.make(~marginLeft="6px", ())}>
        {React.string("Add Todo")}
      </button>
    </form>
    <h2> {React.string("Todos:")} </h2>
    <div>
      {React.array(
        Belt.Array.map(todos, todo => {
          <li key={todo.id}>
            <span> {React.string(todo.text)} </span>
            <span style={ReactDOM.Style.make(~marginLeft="8px", ~cursor="pointer", ())}> 
              {React.string("X")} 
            </span>
          </li>
        }),
      )}
    </div>
  </>
}

代码说明 #

1. 类型转换：Webapi.Dom.HtmlFormElement.ofEventTargetExn把通用的EventTarget转为表单元素类型，确保能调用表单专属API
2. FormData获取：Webapi.Dom.HtmlFormElement.data(formElem)是文档提示的用法，直接从表单实例生成对应的FormData对象
3. 字段取值：Webapi.FormData.get返回option<string>，需要处理空值或纯空格的无效输入
4. 用户体验优化：添加了表单重置逻辑，提交后自动清空输入框

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