选择ALL REECT JS中的所有复选框

Question

我想创建一个选定的复选框，每个产品行都有一个复选框，一旦单击复选框，它将使用其产品ID，变化和计数来计算和显示所选产品的总价格。我想在单击“选择全部”时要做，所有其他检查都需要勾选并显示所有产品价格的总数，我为每个行复选框执行了代码，但我不确定如何选择所有复选框，需要帮助，以下是代码， https://codesandbox.io/s/select-all-checkbox-uzmllg 这是代码和框。

import "./styles.css";
import React, { useEffect, useState } from "react";
export default function App() {
  const [isCheckAll, setIsCheckAll] = useState(false);
  const [checkedItems, setCheckedItems] = useState(
    JSON.parse(localStorage.getItem("checkedItems") || "[]")
  );
  useEffect(() => {
    localStorage.setItem("checkedItems", JSON.stringify(checkedItems));
  }, [checkedItems]);
  const addChecked = (itemId, variationId, qty) => {
    setCheckedItems([
      ...checkedItems,
      { ProductID: itemId, VariationID: variationId, Count: qty }
    ]);
  };

  const removeChecked = (itemId, variationId) => {
    const toBeRemove = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    if (toBeRemove) {
      checkedItems.splice(checkedItems.indexOf(toBeRemove), 1);
      setCheckedItems([...checkedItems]);
    }
  };

  const getCheckedStatus = (itemId, variationId) => {
    const found = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    return found !== null;
  };

  const handleSelectAll = (e) => {
    if (isCheckAll) {
      //
    }
  };
  return (
    <div className="App">
      {cartData.Result.map((shop) =>
          shop.ShopCartList.map((cart) => (
            <div key={cart.ShopID} md="12" lg="12">
              
                {cart.productCartList.map((items) => {
                  return (
                    <div key={items.VariationID} md="12" lg="12">
                      
                              <div id="additem" className="pt-5">
                                {items.Stock === 0 ? (
                                  <h6 className="bg-light text-danger font-weight-bold ">
                                    SOLD OUT
                                  </h6>
                                ) : (
                                  <input
                                    type="checkbox"
                                    value={getCheckedStatus(
                                      items.ProductID,
                                      items.VariationID
                                    )}
                                    onChange={(e) => {
                                      if (e.target.checked) {
                                        addChecked(
                                          items.ProductID,
                                          items.VariationID,
                                          items.Count
                                        );
                                      } else {
                                        removeChecked(
                                          items.ProductID,
                                          items.VariationID,
                                          items.Count
                                        );
                                      }
                                    }}
                                  />
                                )}
                              </div>
                      </div>
                  );
                })}
              </div>
            
          ))
        )}
      <div>
        <input
          type="checkbox"
          name="selectAll"
          id="selectAll"
          handleClick={handleSelectAll}
          isChecked={isCheckAll}
        />
        Select All
      </div>
    </div>
  );
}

Answer 1

在handleselectall中，您需要设置checkeditems是您的所有数组项目。您不需要iScheckall状态，您可以通过验证checkedItems的长度查看所有状态，

const flattenCartData = (cartData) => {
  const arr = [];
  cartData.Result.forEach((shop) => {
    shop.ShopCartList.forEach((cart) => {
      cart.productCartList.forEach((items) => {
        arr.push(items);
      });
    });
  });
  return arr;
};

export default function App() {
  const [checkedItems, setCheckedItems] = useState(
    JSON.parse(localStorage.getItem("checkedItems") || "[]")
  );
  const ITEMS = flattenCartData(cartData);
  const isCheckAll = checkedItems.length === ITEMS.length;
  useEffect(() => {
    localStorage.setItem("checkedItems", JSON.stringify(checkedItems));
  }, [checkedItems]);
  const addChecked = (itemId, variationId, qty) => {
    setCheckedItems([
      ...checkedItems,
      { ProductID: itemId, VariationID: variationId, Count: qty }
    ]);
  };

  const removeChecked = (itemId, variationId) => {
    const toBeRemove = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    if (toBeRemove) {
      checkedItems.splice(checkedItems.indexOf(toBeRemove), 1);
      setCheckedItems([...checkedItems]);
    }
  };

  const getCheckedStatus = (itemId, variationId) => {
    const found = checkedItems.find(
      (item) => item.ProductID === itemId && item.VariationID === variationId
    );

    return found !== undefined;
  };

  const handleSelectAll = (e) => {
    if (isCheckAll) {
      setCheckedItems([]);
    } else setCheckedItems([...ITEMS]);
  };

  return (
    <div className="App">
      {cartData.Result.map((shop) =>
        shop.ShopCartList.map((cart) => (
          <div key={cart.ShopID} md="12" lg="12">
            {cart.productCartList.map((items) => {
              return (
                <div key={items.VariationID} md="12" lg="12">
                  <div id="additem" className="pt-5">
                    {items.Stock === 0 ? (
                      <h6 className="bg-light text-danger font-weight-bold ">
                        SOLD OUT
                      </h6>
                    ) : (
                      <div>
                        <input
                          type="checkbox"
                          checked={getCheckedStatus(
                            items.ProductID,
                            items.VariationID
                          )}
                          onChange={(e) => {
                            if (e.target.checked) {
                              addChecked(
                                items.ProductID,
                                items.VariationID,
                                items.Count
                              );
                            } else {
                              removeChecked(
                                items.ProductID,
                                items.VariationID,
                                items.Count
                              );
                            }
                          }}
                        />
                        <span>{items.ProductName}</span>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        ))
      )}
      <div>
        <input
          type="checkbox"
          name="selectAll"
          id="selectAll"
          onChange={handleSelectAll}
          checked={isCheckAll}
        />
        Select All
      </div>
    </div>
  );
}

我创建了 codesandbox 。您可以检查，希望它有帮助！