React 表单提交导致页面重新加载，尽管使用了 e.preventDefault()

Question

我正在开发一个 React 组件，其表单使用自定义钩子发送消息。尽管在表单的 onSubmit 处理程序中使用了 e.preventDefault()，但每次提交表单时页面都会重新加载，这会中断我的调试过程并重置状态。我已验证 e.preventDefault() 是否被正确调用，并且页面上没有其他表单或提交按钮可能导致此行为。我在控制台中没有看到任何可以解释此问题的 JavaScript 错误。我还检查了表单设置是否正确，按钮类型为“提交”。 这是组件

`

import { FaSearch } from "react-icons/fa";
import useSendMessage from "../../hooks/useSendMessage";
import { useState } from "react";

const SearchInput = () => {
  const { loading, sendMessage } = useSendMessage();
  const [message, setMessage] = useState("");

  const handleMessageSend = async (e) => {
    e.preventDefault(); // Prevents default page reload

    if (!message) return;
    await sendMessage(message);
    setMessage("");
  };

  return (
    <form onSubmit={handleMessageSend}>`
      <input`
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type a message"
      />
      <button type="submit">
        {loading ? <span>Loading...</span> : <FaSearch />}
      </button>
    </form>
  );
};

export default SearchInput;`

任何见解都会有帮助

我尝试过的：

我设置了一个带有 onSubmit 处理程序的 React 表单，该处理程序调用 e.preventDefault() 来阻止页面重新加载。我实现了一个自定义挂钩来处理通过 API 发送消息。我还验证了表单配置是否正确，提交按钮类型设置为“提交”。

我的期望：

我希望表单能够异步提交消息，而无需重新加载页面。状态应使用新消息进行更新，并且输入字段应重置为空字符串。

实际发生的事情：

尽管调用了 e.preventDefault()，每次提交表单时页面仍然会重新加载，这会重置组件状态并中断表单提交过程。我无法正确调试问题，因为页面重新加载使我无法查看控制台日志或跟踪状态更改。

Answer 1

您没有将事件传递给

handleMessageSend

函数。

更改此行，它应该可以工作：

onSubmit={(e) => handleMessageSend(e)}