javascript - 无法在 Safari 上执行提交按钮

Question

我正在尝试使用具有提交类型的按钮并为其分配功能。每当我尝试使用 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;

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

标签： javascriptreactjsfirebase

Answer 1

您还可以使用 onSubmit 事件：

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