使用 React JS 中的复选框创建一个选定行的数组

Posted 2023-02-22

【中文标题】使用 React JS 中的复选框创建一个选定行的数组

【英文标题】：Create an array of selected rows using checkboxes in React JS

【发布时间】：2022-01-18 13:07:41

【问题描述】：

我有一个数据表。第一列是一个复选框。我正在尝试为每个被选中的行 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 将从数组中删除。

非常感谢，

【参考方案1】：

您不应使用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)
  

【参考方案2】：

当我处理这种情况时，我更喜欢将检查的元素存储到一个对象中，使用这种方法可以避免发现受影响的索引。此外，Material UI 的 Checkbox 必须使用其 checked 属性进行设置。

例如：

 const [selectedRows, setSelectedRows] = useState();

处理程序：

 const handleCheckbox = (event, row) => 
      setSelectedRows((state) => 
         ( 
           ...state, 
           selectedRows:  
             ...state.selectedRows, 
             [row.id]: event.target.checked
            
         )
       );
 ;

JSX：

 <TableBody>
        expenseTransactions.map((row) => (
          <TableRow key=row.id>
            <TableCell>
              <Checkbox 
                checked= selectedRows[row.id] || false  
                onChange=(event) => handleCheckbox(event, row) 
              />
            </TableCell>
          </TableRow>
   </TableBody>

【参考方案3】：

要将选中状态保持在某个状态，请将选中项的名称存储在数组中。

  const [checkedState, setChekcedState] = useState([]);
  
  const handleChange = (e) =>
    const checked, name = e.target
    if(checked)
      setChekcedState(oldState => ([...oldState, name]))
    else
      setChekcedState(oldState => oldState.filter(item => item !== name))
    
  

根据评论，ID 是数字。因此，将数字转换为字符串。 当需要数组时，将这些字符串转换回数字。

<TableBody>
    expenseTransactions.map((item) => (
        <TableRow key=item.id>
            <Checkbox
                onChange=handleChange
                checked=checkedState.includes(item.id)
                name=item.id
            />
        </TableRow>
    ))
</TableBody>

将这些字符串转换回数字

let convertedIntegerArr = checkedState.map(item=>parseInt(item))

这是工作演示

【讨论】：

谢谢。有一件事，我的身份证是导致这不起作用的数字。你会如何解决这个问题？干杯

嗨！因为这个简单直接的解决方案是将该数字转换为字符串。我正在相应地更新我的答案