在 React 和 Typescript 中处理 FormData - 获取表单值？答案

【问题标题】：Handle FormData in React and Typescript - get form values?在 React 和 Typescript 中处理 FormData - 获取表单值？
【发布时间】：2023-01-31 06:27:33
【问题描述】：

我正在尝试从表单中获取值：

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const value = formData.get('origin') ? 'open' : 'on';
    updateResizingOptionsQuery.mutate({ value });
  };

由于 React 发送 SynteticEvents e.target 的接口不适合 FormData 构造函数。在示例中，我正在转换不理想的类型。该代码的更好版本是什么？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

使用 e.currentTarget 而不是 e.target 有效。因为 currentTarget 总是引用根事件侦听器元素，所以 TypeScript 知道它是 <form>：

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  const value = formData.get("origin") ? "open" : "on";
  // updateResizingOptionsQuery.mutate({ value });
};

【讨论】：