javascript - 如何在点击反应时切换 tabPane 内容

Question

我有一个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;

标签： javascriptreactjsreact-tabs

Answer 1

结帐https://github.com/reactjs/react-tabs#selectedindex-number

<Tabs defaultIndex={1} onSelect={index => console.log(index)}>
  <TabList>
    <Tab>Title 1</Tab>
    <Tab>Title 2</Tab>
  </TabList>
  <TabPanel></TabPanel>
  <TabPanel></TabPanel>
</Tabs>