单击下一个和上一个按钮时如何激活选项卡

Question

如何在单击“下一个”和“上一个”按钮时进入“活动”选项卡我的页面上有4个选项卡------------------------我有两个按钮（下一个和上一个），我想在用户单击下一个按钮或上一个按钮时激活当前标签。

================================================ =======================

      import React from "react";

     export default class Rough extends React.Component {
     constructor() {
     super();

          this.state = {
                slide: [
                { tab: "1-tab", name: "Ashish", msg: "hellou", silde: "fst slide" },
                { tab: "2-tab", name: "Ashish1", msg: "helloa", silde: "scnd slide" },
                { tab: "3-tab", name: "Ashish11", msg: "hellos", silde: "thrd slide" },
                 {
                   tab: "4-tab",
                   name: "Ashish111",
                   msg: "helloh",
                   silde: "fourth slide"
                  }
                 ],
             activeTab: { tab: "1-tab" },
             index: 0,
             disableNext: false,
             disablePrev: true
          };
          }

          onNextClik = e => {
            e.preventDefault();

           this.setState(prev => ({
           disableNext: this.state.index === this.state.slide.length - 1,
           disablePrev: !this.state.index > 0,
           index: prev.index + 1
          }));

         this.state.slide.map((tab, i) => {

         if (this.state.index === i ) {
           this.setState({ activeTab: tab });
         }
        });
         };

     onPrevClik = e => {
       e.preventDefault();

       this.setState(prePrev => ({
         index: prePrev.index - 1,
         disablePrev: this.state.index === 0,
         disableNext: this.state.index > 0
       }));

       this.state.slide.map((tab, i) => {

        if (this.state.index === i) {
          this.setState({activeTab: tab});
         }
        });
      };

    render() {
      return (
         <>
            <ul style={{ display: "flex" }}>
            {/* Tabs */}

      {this.state.slide.map((tab, i) => {
        return (
          <li style={{ padding: "20px" }}>
            <a
              href="#"
              className={
                tab.tab === this.state.activeTab.tab ? "active" : ""
              }
            >
              {tab.tab}
            </a>
          </li>
        );
      })}
    </ul>

    {/* Button */}

    <div>
      <button onClick={this.onNextClik} disabled={this.state.disableNext}>
        Next
      </button>
      <button onClick={this.onPrevClik} disabled={this.state.disablePrev}>
        Previous
      </button>
    </div>
        </>
          );
         }
           }