【发布时间】：2021-04-04 14:32:30
【问题描述】：
我在第 232 行向VideocamOutlinedIcon 添加函数时遇到一些问题，我想在其中添加一个onclick，将用户重定向到另一个选项卡中的外部域链接。我尝试了许多解决方案，但没有一个有效。我尝试通过react-router-dom 和redirect 使用Link，但这些也不起作用。
我的代码：
import React, { useEffect, useState, useRef } from "react";
import { Avatar, IconButton } from "@material-ui/core";
import VideocamOutlinedIcon from '@material-ui/icons/VideocamOutlined';
import MoreVertIcon from "@material-ui/icons/MoreVert";
import SearchOutlined from "@material-ui/icons/SearchOutlined";
import InsertEmoticonIcon from "@material-ui/icons/InsertEmoticon";
import MicIcon from "@material-ui/icons/Mic";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import db from "./firebase";
import firebase from "firebase";
import "./Chat.css";
import { Link, useParams, Redirect } from "react-router-dom";
import { useStateValue } from "./StateProvider";
import { actionTypes } from "./reducer";
import UseWindowDimensions from "./UseWindowDimensions";
import useSound from "use-sound";
import "emoji-mart/css/emoji-mart.css";
import { Picker } from "emoji-mart";
import Linkify from "react-linkify";
function Chat() {
const [seed, setSeed] = useState("");
const [input, setInput] = useState("");
const { roomId } = useParams();
const [roomName, setRoomName] = useState("false");
const [messages, setMessages] = useState([]);
const [toggler, setToggler] = useState(true);
const displayName = localStorage.getItem("displayName");
const [{ togglerState }, dispatch] = useStateValue();
const [{ photoURL }] = useStateValue();
const [emoji, setEmoji] = useState(false);
const [issendChecked, setIssendChecked] = useState(false);
const [datewise, setDateWise] = useState([]);
const [clientGMT, setClinetGMT] = useState("");
const [lastseenPhoto, setLastseen] = useState("");
const { width } = UseWindowDimensions();
var hour = 0,
extramin = 0,
minutes = 0,
hourly = 0,
GMTminutes = String(clientGMT).slice(4, 6),
scrl,
fix = 0;
const [playOn] = useSound(`${process.env.PUBLIC_URL}/send.mp3`, {
volume: 0.5,
});
const [playOff] = useSound(`${process.env.PUBLIC_URL}/send.mp3`, {
volume: 0.5,
});
const addEmoji = (e) => {
let emoji = e.native;
setInput(input + emoji);
};
const checkEmojiClose = () => {
if (emoji) {
setEmoji(false);
}
};
function getTimeZone() {
var offset = new Date().getTimezoneOffset(),
o = Math.abs(offset);
return (
(offset < 0 ? "+" : "-") +
("00" + Math.floor(o / 60)).slice(-2) +
":" +
("00" + (o % 60)).slice(-2)
);
}
useEffect(() => {
setClinetGMT(getTimeZone());
});
useEffect(() => {
setSeed(Math.floor(Math.random() * 5000));
if (roomId) {
db.collection("rooms")
.doc(roomId)
.onSnapshot((snapshot) => {
setRoomName(snapshot.data().name);
});
db.collection("rooms")
.doc(roomId)
.collection("messages")
.orderBy("timestamp", "asc")
.onSnapshot((snapshot) => {
setMessages(snapshot.docs.map((doc) => doc.data()));
});
}
}, [roomId]);
useEffect(() => {
setLastseen(messages[messages.length - 1]?.photoURL);
}, [messages]);
const sendMessage = (e) => {
e.preventDefault();
if (input.length > 0) {
db.collection("rooms")
.doc(roomId)
.collection("messages")
.add({
message: input,
name: displayName,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
photoURL: localStorage.getItem("photoURL"),
});
setIssendChecked(!issendChecked);
issendChecked ? playOff() : playOn();
setInput("");
}
};
let blankObj = {};
let TotalObj = [];
if (messages.length > 0) {
let checkDate = "";
let blankArray = [];
let dateArray = [];
messages.forEach(function (message, i) {
let messageDate = String(
new Date(message.timestamp?.toDate()).toUTCString()
).slice(5, 12);
if (dateArray.indexOf(messageDate) === -1) {
dateArray.push(messageDate);
}
});
var index = 0;
messages.forEach(function (message, i) {
let messageDate = String(
new Date(message.timestamp?.toDate()).toUTCString()
).slice(5, 12);
if (messageDate === dateArray[index] && i == messages.length - 1) {
blankArray.push({
messageData: message.message,
name: message.name,
timestamp: message.timestamp,
});
blankObj[dateArray[index]] = blankArray;
TotalObj.push(blankObj);
blankObj = {};
blankArray = [];
blankArray.push({
messageData: message.message,
name: message.name,
timestamp: message.timestamp,
});
index = index + 1;
} else if (messageDate == dateArray[index]) {
blankArray.push({
messageData: message.message,
name: message.name,
timestamp: message.timestamp,
});
} else {
blankObj[dateArray[index]] = blankArray;
TotalObj.push(blankObj);
blankObj = {};
blankArray = [];
blankArray.push({
messageData: message.message,
name: message.name,
timestamp: message.timestamp,
});
if (messageDate != dateArray[index] && i == messages.length - 1) {
blankObj[messageDate] = blankArray;
TotalObj.push(blankObj);
}
index = index + 1;
}
});
}
useEffect(() => {
setDateWise(TotalObj);
}, [messages]);
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
if (messagesEndRef.current) {
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
}
};
useEffect(() => {
scrollToBottom();
});
useEffect(() => {
setToggler(!toggler);
}, [togglerState]);
useEffect(() => {
scrollToBottom();
}, [messages]);
const handleDrawerToggle = () => {
setToggler(!toggler);
dispatch({
type: actionTypes.SET_TOGGLER,
togglerState: togglerState + 1,
});
};
return (
<>
{width < 629 ? (
<div className={togglerState % 2 === 0 ? "chat" : "chat hide__chat"}>
<div className="chat__header">
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
>
<ArrowBackIcon />
</IconButton>
<Avatar src={lastseenPhoto} />
<div className="chat__headerInfo">
<h3>{roomName}</h3>
<p className="header__lastSeen">
last seen{" "}
{messages.length !== 0
? messages[messages.length - 1].timestamp
?.toDate()
.toUTCString()
: "Loading"}
</p>
</div>
<div className="chat__headerRight">
<IconButton>
<SearchOutlined />
</IconButton>
<IconButton>
<VideocamOutlinedIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</div>
</div>
export default Chat;【问题讨论】：
标签： javascript reactjs react-router onclick material-ui