React标签输入组件中阻止表单默认提交的问题排查

核心问题原因 #

浏览器中，表单内输入框按下Enter时，默认提交行为是在keydown事件阶段触发的。你之前在keyUp事件中调用preventDefault()已经太晚——此时表单提交的默认行为已经执行，所以子组件的阻止代码无效。

具体修改步骤 #

1. 替换输入框事件绑定
   把子组件输入框的onKeyUp换成onKeyDown，确保在默认提交行为触发前拦截：

<input
  placeholder={placeholder}
  value={inputValue}
  onKeyDown={(e) => onEnter(e)} // 替换onKeyUp为onKeyDown
  onChange={(e) => onChange(e)}
/>

2. 完善事件阻止逻辑
   在onEnter函数中同时阻止默认行为和事件冒泡，避免触发父表单的提交：

const onEnter = (e) => {
  if (e.code === 'Enter' && inputValue && valid) {
    e.preventDefault(); // 阻止浏览器默认的表单提交行为
    e.stopPropagation(); // 阻止事件冒泡到父表单元素
    setTags([...tags, { id: String(Math.floor(Math.random() * 1000)), name: inputValue }]);
    setInputValue('');
  }
};

保留表单正常提交+必填字段验证（Remix方案） #

不要用客户端useState做条件提交（异步状态更新会导致滞后），直接用Remix的服务端验证处理必填字段：

1. 路由action中添加服务端验证

export async function action({ request }) {
  const formData = await request.formData();
  const requiredField = formData.get('requiredField'); // 替换为你的必填字段名
  const tags = formData.getAll('tags'); // 获取标签数据

  // 验证必填字段
  if (!requiredField) {
    return json({ error: '必填字段不能为空' }, { status: 400 });
  }

  // 执行正常的表单提交逻辑（如存入数据库）
  return json({ success: true, tags });
}

2. 客户端获取验证结果
   在父组件中用useActionData展示服务端返回的错误信息：

import { useActionData } from '@remix-run/react';

export default function ParentForm() {
  const actionData = useActionData();

  return (
    <form method="post">
      <input type="text" name="requiredField" required />
      <TagInput name="tags" />
      <button type="submit">提交</button>
      {actionData?.error && <p style={{ color: 'red' }}>{actionData.error}</p>}
    </form>
  );
}

这样既保留了表单的正常提交行为，又能通过服务端验证确保必填字段不为空，同时彻底解决添加标签时误触表单提交的问题。

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