Javascript Can'；t在Safari上执行提交按钮

我正在尝试使用按钮提交类型与分配的功能。每当我尝试使用Safari执行此操作时，页面都会重新加载。与此类似，此功能未分配给按钮。我检查了所有其他浏览器，其他地方没有问题

import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import "./Chat.css";
import Message from "./message/Message";
import db from "../../firebase/firebase";
import firebase from "firebase";
import "firebase/firestore";
import { selectChatId, selectChatName } from "../../store/chatSlice";
import { selectUser } from "../../store/userSlice";
import FlipMove from "react-flip-move";

function Chat() {
  const [inputValue, setInputValue] = useState("");
  const user = useSelector(selectUser);
  const chatId = useSelector(selectChatId);
  const chatName = useSelector(selectChatName);
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    if (chatId) {
      db.collection("chats")
        .doc(chatId)
        .collection("messages")
        .orderBy("timestamp", "desc")
        .onSnapshot((snapshot) => {
          setMessages(
            snapshot.docs.map((doc) => ({
              id: doc.id,
              data: doc.data(),
            }))
          );
        });
    }
  }, [chatId]);

  const sendMessage = (e) => {
    e.preventDefault();
    db.collection("chats").doc(chatId).collection("messages").add({
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      message: inputValue,
      displayName: user.displayName,
      photo: user.photo,
      email: user.email,
    });
    setInputValue("");
  };

  return (
    <div className="chat">
      <div className="chat__header">
        <h4>
          To: <span className="chat__userName">{chatName}</span>
        </h4>
      </div>
      <div className="chat__messages">
        <FlipMove>
          {messages.map(({ id, data }) => (
            <Message key={id} content={data} />
          ))}
        </FlipMove>
      </div>
      <div className="chat__messageInput">
        <form>
          <input
            placeholder={"Message"}
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            disabled={!chatId}
          />
          <button
            type="submit"
            className="chat__messageInputButton"
            onClick={sendMessage}
            disabled={!chatId}
          ></button>
        </form>
      </div>
    </div>
  );
}

export default Chat;

import React，{useState，useffect}来自“React”；
从“react redux”导入{useSelector}；
导入“/Chat.css”；
从“/Message/Message”导入消息；
从“../../firebase/firebase”导入数据库；
从“firebase”导入firebase；
导入“firebase/firestore”；
从“../../store/chatSlice”导入{selectChatId，selectChatName}”；
从“./../store/userSlice”导入{selectUser}；
从“反应翻转移动”导入翻转移动；
函数Chat（）{
常量[inputValue，setInputValue]=useState（“”）；
const user=useSelector（selectUser）；
const chatId=使用选择器（selectChatId）；
const chatName=useSelector（selectChatName）；
const[messages，setMessages]=useState（[]）；
useffect（（）=>{
if（chatId）{
数据库收集（“聊天”）
.doc（chatId）
.收集（“信息”）
.orderBy（“时间戳”、“描述”）
.onSnapshot（（快照）=>{
设置消息(
snapshot.docs.map（（doc）=>({
id:doc.id，
数据：doc.data（），
}))
);
});
}
}，[chatId]）；
const sendMessage=（e）=>{
e、 预防默认值（）；
db.collection（“chats”）.doc（chatId）.collection（“messages”）.add({
时间戳：firebase.firestore.FieldValue.serverTimestamp（），
消息：inputValue，
displayName:user.displayName，
照片：user.photo，
电子邮件：user.email，
});
setInputValue（“”）；
};
返回(
收件人：{chatName}
{messages.map（{id，data}）=>(
))}
setInputValue（e.target.value）}
已禁用={！chatId}
/>
);
}
导出默认聊天；

---

我从来没有遇到过这样的问题，我不知道发生了什么。有什么想法吗？

当按钮具有

type='submit'

时，它将尝试向服务器提交表单数据。你可以阅读更多关于这方面的内容

您可以使用

event.preventDefault（）

阻止默认事件

我在下面添加了一个示例代码段，运行该代码段，当您单击按钮时，它将触发一个警报，而不是重新加载页面

const按钮组件=（）=>{
const handleSubmit=事件=>{
如果（事件）{
event.preventDefault（）；
}
警报（'clicked！'）；
}
返回(
handleSubmit（）}>单击我
)
}
ReactDOM.render(
,
文件正文
);
您还可以使用onSubmit事件：

return (
      <form onSubmit={yourSubmitFunction}>
        <button type='submit'>Submit</button>
      </form>
    );

返回(
提交
);
我需要提交类型，因为我需要它在按下enter键时做出反应。没有任何显示的按钮，它被隐藏并放在输入中。所以我想我不能把它改成type='button'。还是我不明白？@larryfisherman啊，我明白了，我更新了我的代码片段。我相信您要做的是使用
event.preventDefault（）
阻止默认事件，这很有帮助，谢谢！