我有一个App
在React
. 这个应用程序有两个tabs
在first tab
我正在显示的列表中chated users
和在second tab
我正在显示的所有registerd contacts
. 选项卡按预期工作。现在我的问题是当用户在时second tab
,如果他clicks
在任何用户上。它应该显示chat tab
。我正在使用它npm package
来创建tabs
react-tabs。
// chatsection.js : 聊天组件和注册联系人的父组件
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import "./Style.css";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import Allcontacts from "./Allcontacts";
import ChatedList from "./ChatedList";
import { setTabPane } from "./actions";
import "./Style.css";
const ChatSection = (props) => {
const dispatch = useDispatch();
const tab = useSelector((state) => state.tab);
console.log("tab", tab);
return (
<div className="">
<Tabs>
<TabList style={{ display: "flex" }}>
<Tab
onClick={() => dispatch(setTabPane("chat"))}
className={` ${tab === "chat" ? "abc" : "1"}`}
>
Chats
</Tab>
<Tab
onClick={() => dispatch(setTabPane("contact"))}
className={` ${tab === "contact" ? "abc" : "1"}`}
>
Allcontacts
</Tab>
</TabList>
<TabPanel>
<ChatedList />
</TabPanel>
<TabPanel>
<Allcontacts />
</TabPanel>
</Tabs>
</div>
);
};
export default ChatSection;
//聊天.js
import React, { useEffect, useState } from "react";
import axios from "axios";
import ShowSingle from "./ShowSingle";
function ChatedList() {
const [users, setUsers] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
axios
.get("http://localhost:3005/")
.then(function (response) {
setUsers(response.data);
console.log("users" + JSON.stringify(response.data));
setLoading(false);
})
.catch(function (error) {
console.log(error);
setLoading(false);
});
}, []);
return (
<div>
{!loading && users.map((user, id) => <ShowSingle key={id} user={user} />)}
</div>
);
}
export default ChatedList;
** //所有联系人.js
import React, { useEffect, useState } from "react";
import "./All.css";
import ShowSingle from "./ShowSingle";
import axios from "axios";
import { useDispatch } from "react-redux";
import { setTabPane } from "./actions";
function Allcontacts() {
const dispatch = useDispatch();
const [users, setUsers] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
axios
.get("http://localhost:3005/all")
.then(function (response) {
setUsers(response.data);
console.log("users" + JSON.stringify(response.data));
setLoading(false);
})
.catch(function (error) {
console.log(error);
setLoading(false);
});
}, []);
const clickHandler = () => {
dispatch(setTabPane("chat"));
};
return (
<div>
{!loading &&
users.map((user, id) => (
<ShowSingle key={id} user={user} click={clickHandler} />
))}
</div>
);
}
export default Allcontacts;
import React, { useEffect, useState } from "react";
import "./All.css";
import ShowSingle from "./ShowSingle";
import axios from "axios";
import { useDispatch } from "react-redux";
import { setTabPane } from "./actions";
function Allcontacts() {
const dispatch = useDispatch();
const [users, setUsers] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
axios
.get("http://localhost:3005/all")
.then(function (response) {
setUsers(response.data);
console.log("users" + JSON.stringify(response.data));
setLoading(false);
})
.catch(function (error) {
console.log(error);
setLoading(false);
});
}, []);
const clickHandler = () => {
dispatch(setTabPane("chat"));
};
return (
<div>
{!loading &&
users.map((user, id) => (
<ShowSingle key={id} user={user} click={clickHandler} />
))}
</div>
);
}
export default Allcontacts;
//显示单个用户
import React from "react";
function ShowSingle({ user, click }) {
return (
<div className="wrapper">
<ul>
<li onClick={click}>{user.name}</li>
</ul>
</div>
);
}
export default ShowSingle;