React+TS获取表单submitter值遇类型错误，求解决方案

方案一：类型断言兼容SubmitEvent #

保持表单onSubmit的类型匹配，通过类型断言让TypeScript识别nativeEvent的submitter属性：

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  // 将nativeEvent断言为SubmitEvent，获取提交按钮的value
  const submitter = (e.nativeEvent as SubmitEvent).submitter?.value;

  e.preventDefault();
  // 增加空值判断，避免无意义的接口调用
  if (!submitter || checkedBox.length === 0) return;

  try {
    const response = await axios.post(
      `${process.env.REACT_APP_BACKEND_BASE}/update${submitter}tasks`,
      checkedBox
    );
    if (response.status === 200) {
      setForceUpdate(current => current + 1);
    }
  } catch (error) {
    console.log(error);
  }
}

说明 #

• React的FormEvent对应的原生事件是浏览器的SubmitEvent，它自带submitter属性，但TypeScript默认未关联这一类型，因此需要手动断言。
• 用可选链?.处理极端场景（比如表单非按钮触发提交的情况），避免运行时报错。
• 重构了异步代码写法，用try/catch替代then/catch，更符合TypeScript异步代码风格。

方案二：给按钮绑定独立点击事件 #

如果表单提交按钮数量不多，可直接给每个按钮绑定专属处理函数，绕过submitter类型问题：

<form>
  <button type="submit" onClick={handleMarkDone}>标记完成</button>
  <button type="submit" onClick={handleDelete}>删除</button>
</form>

对应的处理函数：

async function handleMarkDone(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
  if (checkedBox.length === 0) return;
  
  try {
    const response = await axios.post(
      `${process.env.REACT_APP_BACKEND_BASE}/updateDonetasks`,
      checkedBox
    );
    if (response.status === 200) {
      setForceUpdate(current => current + 1);
    }
  } catch (error) {
    console.log(error);
  }
}

async function handleDelete(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
  if (checkedBox.length === 0) return;
  
  try {
    const response = await axios.post(
      `${process.env.REACT_APP_BACKEND_BASE}/updateDeletetasks`,
      checkedBox
    );
    if (response.status === 200) {
      setForceUpdate(current => current + 1);
    }
  } catch (error) {
    console.log(error);
  }
}

说明 #

• 每个按钮逻辑独立，无需依赖表单提交事件的submitter属性，类型完全匹配，无TypeScript报错。
• 适合按钮数量少、逻辑差异大的场景，代码可读性更高。

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