选项卡菜单对应按钮激活

Question

您好，我现在正在制作标签菜单。 我的问题是我想在单击按钮时给出 is-active ，但我不知道在空白处放什么值。

type Props = {
  title: string
  index: number
  setSelectedTab: (index: number) => void
}

const TabTitle: React.FunctionComponent<Props> = ({ title, setSelectedTab, index }) => {
  
  // The value to be activated. Initial value is `0th button`
  const [activeIndex, setActiveIndex] = useState(0);
  

  const onClick = useCallback(() => {
    setSelectedTab(index)
  }, [setSelectedTab, index])


  return (
    <li>
      <button
      key={index}
      className={activeIndex === [empty place] ? "is-active" : ""} 
      onClick={() => onClick()}
      >
        {title}
        </button>
    </li>
  )
}

 console.log(index);
  // 0
  // 1 
  // 2 

如何使用索引值If you click the 0th button, index : 0 If ​​you click the 1st button, index: 1 做成这样之后，className={activeIndex === index ? "is-active" : ""} 放上index 就可以正常工作了，但是不知道怎么做这样的索引。

如何根据点击的值设置索引给第一次点击0 第二次点击1？

Answer 1

您需要将index 属性与selectedTab 属性（它可能存在于父组件上，因为您将setSelectedTab 函数传递给TabTitle 组件）进行比较。

import { useCallback } from "react";

type Props = {
  title: string;
  index: number;
  selectedTab: number; // <-- this should be passed by the parent 
  setSelectedTab: (index: number) => void;
};

const TabTitle: React.FunctionComponent<Props> = ({
  title,
  selectedTab,
  setSelectedTab,
  index
}) => {
  const onClick = useCallback(
    (index) => {
      setSelectedTab(index);
    },
    [setSelectedTab]
  );

  return (
    <li>
      <button
        key={index}
        className={selectedTab === index ? "is-active" : ""} // it's active if its index is the same as the selected tab
        onClick={() => onClick(index)} // <-- so it knows which button was clicked
      >
        {title}
      </button>
    </li>
  );
};

export default TabTitle;

您可以在代码框上看到simple example。