引导一个按钮选择所有其他按钮

Question

我的目标：当我点击他时，我想选择一个选择按钮，他需要选择所有其他按钮。

所以当我选择 book1 时，我希望它在它下面选择 1、2、3、4、5。

基本上，我需要将所有这些按钮归为一个能够切换它们的按钮。 代码：

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./SelectMasekhtot.css";

const SelectMasekhtot = () => {
  const [data, setData] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios("http://localhost:5000/user/getSelectBoxes/");
      setData(result.data);
    };
    fetchData();
  }, []);

  return (
    <div className='containerSelectMasekhtot'>
      <h1>selection part</h1>
      {Object.entries(data).map(([key, value]) => (
        <div className='bookContainer '>
          <input
            type='checkbox'
            class='btn-check'
            id={key}
            autocomplete='off'
          />
          <label class='btn btn-outline-primary' for={key}>
            {key}
          </label>
          <br />
          {value.map((arrValue) => (
            <div className='bookChild d-inline'>
              <input
                type='checkbox'
                class='btn-check'
                id={key + arrValue}
                autocomplete='off'
              />
              <label class='btn btn-outline-primary' for={key + arrValue}>
                {arrValue}
              </label>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};
export default SelectMasekhtot;

代码解释我有一个看起来像这样的对象。 并与他一起创建按钮。

{
//   book1: [1, 2, 3, 4, 5],
//   book2: [1, 2, 3, 4, 5],
//   book3: [1, 2, 3, 4, 5],
//   book4: [1, 2, 3, 4, 5],
// };

Answer 1

我们可以尝试添加处于“选定”状态的对象吗？假设它保存数据对象中每个键的值

已选择：{book1: false, book2:false, book3:false}

然后我们必须做两件事

1. 点击按钮 state.selected[key] = 切换值state.selected[key]
2. 为 value.map 中的输入标签分配 state.selected[key]

希望它有效。如果你能给我可复制的链接，我可以给出一个可行的解决方案

Answer 2

在返回块中将“class”更改为“className”。