使用Reaction JS中的复选框创建选定行的数组

织梦狗教程前端问题

2022-01-01

Create an array of selected rows using checkboxes in React JS(使用Reaction JS中的复选框创建选定行的数组)

本文介绍了使用Reaction JS中的复选框创建选定行的数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一张数据表。第一列是一个复选框。我正在尝试创建每个选定行ID的数组。

  const [selectedRows, setSelectedRows] = useState([]);

  const handleCheckbox = (event, row) => {
    if (event.target.checked === true) {
      selectedRows.push(row.id);
    } else {
      selectedRows.pop(row.id);
    }
  };

        <TableBody>
            {expenseTransactions.map((row) => (
              <TableRow key={row.id}>
                <TableCell>
                  <Checkbox onChange={(event) => handleCheckbox(event, row)} />
                </TableCell>
              </TableRow>
       </TableBody>

我不能让它正常工作。任何关于处理onChange事件的最佳方式的想法，这样我就有了一个包含所有选定元素的数组，然后如果我取消选择一个元素，该id将从数组中删除。

谢谢一吨

推荐答案

不应使用selectedRows.push()直接更改state。正确的方法是使用setSelectedRows。正确的代码将如下所示。

const handleCheckbox = (event, row) => {
  if (event.target.checked === true) {
    setSelectedRows([
       ...selectedRows,
       row
    ])
  } else {
    const nextSelectedRows = selectedRows.filter(selectedRow => selectedRow.id != row.id);
    setSelectedRows(nextSelectedRows)
  }
}

这篇关于使用Reaction JS中的复选框创建选定行的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react