只有 1 个真实状态介绍数组 React js

Question

怎么了？

我正在尝试使用 ReactJS (NextJS) 从 frontity 主页重现滑动按钮效果。 Sliding buttons from Frontity

我设法创建了滑动按钮效果，但我在状态管理方面遇到困难。我将我所有的对象都映射为“isActive：true/false”元素，我将创建一个函数，将“isActive：true”放在单击的按钮上，但将“isActive：false”放在所有其他按钮上。我不知道那种东西的语法/方法。

请查看我的 codesandbox 以获得更清晰的信息（使用反应挂钩）： https://codesandbox.io/s/busy-shirley-lgx96

非常感谢大家:)

Answer 1

更新：正如上面 Drew Reese 所指出的，更 cleaner/easier 是只有一个 activeIndex 状态：

const TabButtons = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleButtonClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <>
      <ButtonsWrapper>
        {TabButtonsItems.map((item, index) => (
          <div key={item.id}>
            <TabButtonItem
              label={item.label}
              ItemOrderlist={item.id}
              isActive={index === activeIndex}
              onClick={() => handleButtonClick(index)}
            />
          </div>
        ))}
        <SlidingButton transformxbutton={activeIndex}></SlidingButton>
      </ButtonsWrapper>
    </>
  );
};

我对你的 TabButtons 做了一点修改：

const TabButtons = () => {
  const [buttonProps, setButtonProps] = useState(TabButtonsItems);

  // ////////////   STATE OF SLIDING BUTTON (TRANSLATE X )  ////////////

  const [slidingbtn, setSlidingButton] = useState(0);

  // //////////// HANDLE CLIK BUTTON  ////////////

  const HandleButtonState = (item, index) => {
    setButtonProps((current) =>
      current.map((i) => ({
        ...i,
        isActive: item.id === i.id
      }))
    );

    setSlidingButton(index);
  };

  return (
    <>
      <ButtonsWrapper>
        {buttonProps.map((item, index) => (
          <div key={item.id}>
            <TabButtonItem
              label={item.label}
              ItemOrderlist={item.id}
              isActive={item.isActive}
              onClick={() => HandleButtonState(item, index)}
            />
          </div>
        ))}
        <SlidingButton transformxbutton={slidingbtn}></SlidingButton>
      </ButtonsWrapper>
    </>
  );
};

当我们点击一个按钮时，我们将其 isActive 状态设置为 true，并将所有其余按钮设置为 isActive: false。我们也应该使用状态，因为我们也声明了它。更改状态将强制组件为 re-render，我们也没有改变任何东西，而是重新创建按钮的状态。

只有 1 个真实状态介绍数组 React js

Only 1 true state intro array React js

boolean

reactjs