javascript - 如何在某些条件下同时激活多个按钮？

Question

我有个问题。我想制作按钮部分，用户可以在其中单击按钮来过滤一些内容。当用户单击“全部”按钮时，此时应关闭所有其他按钮（将其颜色更改为初始，未激活）。此外，用户可以检查多个按钮。我不知道该怎么做。

JSON 示例：

{
    title: 'All',
    id: 53,
  },
  {
    title: 'Im a parent',
    icon: <Parent />,
    id: 0,
  },
  {
    title: 'I live here',
    icon: <ILiveHere />,
    id: 2,
  },

代码示例：https ://codesandbox.io/s/sleepy-haze-35htx?file=/src/App.js

它错了，我知道。我尝试了一些解决方案，但我想我无法正确地做到这一点。

使用此代码，我可以激活多个按钮，但我不知道如何设置条件

if (item.title === 'all){ TURN_OFF_ANY_OTHER_BTNS }
我想我应该将选中的按钮存储在临时数组中以进行这些操作。

将非常感谢您的帮助。

标签： javascriptreactjs

Answer 1

这是你想要的吗？

const SocialRole = ({ item, selected, setSelected }) => {
  let style =
    [...selected].indexOf(item.id) !== -1
      ? { color: "red" }
      : { color: "blue" };
  return (
    <button
      style={style}
      onClick={() => {
        if (item.id === 53) {
          setSelected(null);
        } else {
          setSelected(item.id);
        }
      }}
    >
      {item.icon}
      <h1>{item.title}</h1>
    </button>
  );
};

export default function App() {
  // We keep array of selected item ids
  const [selected, setSelected] = useState([roles[0]]);
  const addOrRemove = (item) => {
    const exists = selected.includes(item);

    if (exists) {
      return selected.filter((c) => {
        return c !== item;
      });
    } else {
      return [...selected, item];
    }
  };
  return (
    <div>
      {roles.map((item, index) => (
        <SocialRole
          key={index}
          item={item}
          selected={selected}
          setSelected={(id) => {
            if (id === null) setSelected([]);
            else {
              setSelected(addOrRemove(id));
            }
          }}
        />
      ))}
    </div>
  );
}