如何選中/取消選中 React js 中的所有復選框？

Question

1. 我想當我選中子復選框時，所有列復選框都應該被選中
2. 如果我檢查了父項，我希望所有表格復選框都應該檢查我如何實現我需要代碼示例，如果你有注意：我正在使用功能性反應組件和我自己創建的自定義表格，而不是任何表格庫。 感謝大家 ！

Answer 1

你可以這樣做

在這里，我假設數據將采用以下方式：

permissons = [
              {create:false, read:false, edit: true, delete:true}
              {create:false, read: true, edit: false, delete:true}
             ]

const checkAll = (event, index) => {
const { checked } = event.target;
const newPermission = [...permissions];
if (checked === true) {
  // console.log("Checked");
  newPermission[index].create = true;
  newPermission[index].read = true;
  newPermission[index].edit = true;
  newPermission[index].delete = true;
} else if (checked === false) {
  // console.log("Unchecked");
  newPermission[index].create = false;
  newPermission[index].read = false;
  newPermission[index].edit = false;
  newPermission[index].delete = false;
}
setpermissions([...newPermission]);
};

在 checkAll function 中將事件和索引作為道具傳遞。

Answer 2

您可以嘗試以下邏輯來滿足您的第一個要求。 第二個需求的邏輯是相似的。 您可以為每一行定義一些鈎子以使其更清晰。

const [row, setRow] = useState({ allChecked: true, permissions: [-1, 1, 1, 1, -1, -1, 1]});
// -1 = does not allow change, 0 = unchecked, 1 = checked
// each index represents a permission, you can use enum to make it clearer

useEffect(() => {
    // for update child checkbox
    if (row.allChecked && row.permissions.includes(0) {
        let updatePermission = ow.permissions.map(permission => permission || 1); // if permission is 0 it will be changed to 1
        let updateRow = Object.assign({}, row);
        updateRow.permission = updatePermission;
        setRow(updateRow);
    }
}, [row]}

useEffect(() => {
    let updateRow = Object.assign({}, row);
    // for update permission checkboxs
    if (!row.permissions.includes(0) && !row.allChecked) {
        updateRow.allChecked = true;
        setRow(updateRow);
    } else if (row.permssions.includes(0) && row.allChecked {
        updateRow.allChecked = false;
        setRow(updateRow);
    }
}, [row]);

Answer 3

您需要為行和列創建一個模式例如對於每一行添加行的索引到每個復選框 class 就像 checkbox_${index}

使用 queryselectorAll 來定位它們並觸發點擊

document.querySelectorAll(`row_${index}`).forEach(el=>el.click())

類似於列中所有復選框的情況。