javascript - React Tabs - 无法使用按钮以编程方式移动到下一个和上一个选项卡

Question

我有一个 div，其中有 3 个选项卡和 2 个按钮“返回”和“下一步”。

我想要实现的是，单击“下一步”按钮我应该移动到下一个选项卡，单击“返回”按钮我应该移动到上一个选项卡。

我已经使用了下面的代码，但它不工作

  const [ins, setIns] = useState(false)
  const [pre, setPre] = useState(true);
  const [ques, setQues] = useState(false);
  const [selectedTab, setSelectedTab] = useState(0);
  const tabCount = 3

const onTabClick = (category, val) => {
    updateTab([category], val);
  }
const updateTab = (category, type) => {
    if (type === 'ins') {
      setSelectedTab(0)
      setIns(true)
      setPre(false      
      setQues(false)
    }
    if (type === 'pre') {
      setSelectedTab(1)
      setIns(false)
      setPre(true)
      setQues(false)
    }
   if (type === 'ques') {
      setSelectedTab(2)
      setQues(true)
      setIns(false)
      setPre(false)
    }
            <div>
              <ul>
                <li className="nav-item">
                  <button
                    type="button"
                    className={ins ? 'nav-link pb-3 active' : 'nav-link pb-3'}
                    onClick={() => { onTabClick('infoTabs', 'ins') }}>
                    Ins
                  </button>
                </li>
                <li className="nav-item">
                  <button
                    type="button"
                    className={pre ? 'nav-link pb-3 active' : 'nav-link pb-3'}
                    onClick={() => { onTabClick('infoTabs', 'pre') }}>
                    Pre
                  </button>
                </li>
               <li className="nav-item">
                  <button
                    type="button"
                    className={ques ? 'nav-link pb-3 active' : 'nav-link pb-3'}
                    onClick={() => { onTabClick('infoTabs', 'ques') }} >
                    Ques
                  </button>
                </li>
            </div>  
              <div>
                <button
                  type="button"
                  onClick={() => setSelectedTab((selectedTab + tabCount - 1) % tabCount )}
                >
                  Back
                </button>
              </div>  
              <div >
                <button
                  type="button"
                  onClick={() => setSelectedTab((selectedTab + 1) % tabCount )}
                >
                  Next
                </button>
              </div>
}