受控表单组件导致FormData缺失值，求简便解决方案

在React里混用受控和非受控表单组件时，会碰到受控字段的值没法随默认表单提交（method="post"）发送给服务器的问题。看下面的代码示例：

import { useState } from "react";

export default () => {
  const [email, setEmail] = useState("");

  return (
    <form method="post" action="/example">
      <input type="text" name="first-name" />
      <input type="text" name="last-name" />
      <input
        type="email"
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
        }}
      />
      <button type="submit">submit</button>
    </form>
  );
};

当first-name输入foo、last-name输入bar、email输入baz@example.com时，提交后的payload只有first-name=foo&last-name=bar，受控的email字段直接丢失——原因是受控组件的状态存在React内部，默认表单提交只会读取原生DOM的输入值。

不想把整个表单改成全受控？试试这几个快速解决办法：

方法1：添加同步的隐藏字段 #

在受控的email输入旁放一个同名的隐藏非受控字段，在onChange事件里同步值即可：

<input
  type="email"
  value={email}
  onChange={(e) => {
    setEmail(e.target.value);
    // 同步值到隐藏字段
    document.getElementById('hidden-email').value = e.target.value;
  }}
/>
<input type="hidden" name="email" id="hidden-email" />

默认表单提交会收集所有原生DOM中的表单字段值，隐藏字段同步了受控状态的值，自然会被一起提交到服务器。

方法2：手动拦截表单提交事件 #

用onSubmit拦截默认提交行为，自行构造FormData并加入受控字段的值，再通过fetch或axios发送请求：

export default () => {
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止默认表单提交
    const formData = new FormData(e.target);
    formData.set('email', email); // 手动添加受控字段值
    // 发送请求到服务器
    fetch('/example', {
      method: 'POST',
      body: formData
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="first-name" />
      <input type="text" name="last-name" />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">submit</button>
    </form>
  );
};

这种方式无需修改现有字段的受控状态，仅需添加一个提交处理函数，适合不想大规模改动现有代码的场景。

方法3：用useRef获取DOM值（临时救急） #

如果只是临时快速修复，可以用useRef获取受控输入的DOM节点值，提交时补进FormData：

import { useState, useRef } from "react";

export default () => {
  const [email, setEmail] = useState("");
  const emailRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    formData.set('email', emailRef.current.value);
    fetch('/example', { method: 'POST', body: formData });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="first-name" />
      <input type="text" name="last-name" />
      <input
        ref={emailRef}
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">submit</button>
    </form>
  );
};

注意：这种方式依赖DOM节点，不符合React的状态管理思路，仅适合临时救急，不推荐长期使用。

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