NextJS 13中onSubmit等on开头属性未渲染DOM是否为Bug？

这不是Bug，是React（包括Next.js 13）的正常机制，原因如下：

• React合成事件系统特性：onSubmit这类以on开头的事件处理属性，是React的合成事件，并非直接绑定到真实DOM元素上。React会通过事件委托统一管理这些事件，所以在浏览器的DOM检查器里看不到对应的属性，但事件逻辑仍然会正常触发。
• 属性处理差异：action、method这类原生form标准属性，以及非on开头的自定义属性，会被React直接渲染到真实DOM节点上；而on开头的事件属性会被React拦截，纳入自身的事件系统管理，不会暴露到DOM中。
• 验证事件是否生效的方法：不用纠结DOM里有没有显示，直接测试提交行为——比如在onSubmit的处理函数里加一句console.log('提交触发')，然后点击搜索按钮或回车提交，看控制台是否输出内容，就能确认事件是否正常工作。
• 如果非要用原生DOM事件：可以通过useEffect手动给form元素添加原生事件监听，示例代码：

import { useEffect, useRef } from 'react';

export default function Search() {
  const formRef = useRef(null);

  useEffect(() => {
    const handleSubmit = (e) => {
      e.preventDefault();
      // 你的提交逻辑
    };
    const form = formRef.current;
    if (form) {
      form.addEventListener('submit', handleSubmit);
      return () => form.removeEventListener('submit', handleSubmit);
    }
  }, []);

  return <form ref={formRef}>...</form>;
}

但这种方式没必要，React的合成事件已经能满足绝大多数场景需求。

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