React.js 中每個表格行的單獨復選框

Question

我有一個功能組件，它返回一個包含許多行的表，如下所示：

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";

function Table({ data }) {
    const [checked, setChecked] = useState(false);
    const handleChange = (event) => {
        setChecked(event.target.checked);
    };

return (
    // Some table head code
    <TableBody>
        {data.map((row) => (
            <TableRow key={row.id}>
                <TableCell align="left">
                    <Checkbox
                        checked={checked}
                        onChange={handleChange}
                        inputProps={{ "aria-label": "primary checkbox" }}
                    />
                </TableCell>
            </TableRow>
            // More table row code here
        ))}
    </TableBody>
  );
}

每行都有一個復選框。 問題是當我點擊一個復選框時，其他行上的所有其他復選框都被選中。 我應該如何 go 關於這個。

Answer 1

出於某種原因，我嘗試了這個並且它有效：

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";

function Table({ data }) {
const [checked, setChecked] = useState({});
const handleChange = (event, row) => {
    setChecked({ id: row.id, check: event.target.checked });
};

return (
    // Some table head code
    <TableBody>
        {data.map((row) => (
            <TableRow key={row.id}>
                <TableCell align="left">
                    <Checkbox
                        checked={checked}
                        onChange={(e) => handleChange(e, row)}
                        inputProps={{ "aria-label": "primary checkbox" }}
                    />
                </TableCell>
            </TableRow>
        ))}
    </TableBody>
);

}

Answer 2

簡而言之，發生這種情況的原因是您傳遞了相同的 state 並將處理程序 function 更改為每個 input 。 如果我們要去掉函數的引用層和 state 值，那么這就是您當前在代碼中的內容

.map => new Map([
<input
  type="checkbox"
  checked={false}
  onChange={(event) => set(event.target.checked)}
 />,
 <input
  type="checkbox"
  checked={false}
  onChange={(event) => set(event.target.checked)}
 />
 // ... and so on for each and every one of them
])

所以如果你選中一個，它會改變所有的

您需要為每個復選框聲明一個單獨的 state，或將它們合並為一個大型簡化的 state 復選框。 無需手動聲明每個復選框的最簡單方法是動態生成它們並將它們reduce為單個 state：

import React, { useState, ChangeEvent } from 'react'

// example of what gets passed
const data = [
  { id: 0 },
  { id: 1 },
  { id: 2 },
  { id: 3 },
]

// Checkbox component
const Table ({ data }) => {
  // in case 'data' is async you'll need to use useEffect or useCallback
  // generates individual state for each data row
  const initialState = data.reduce(
    (state, current) => (
      Object.assign(state, { [current.id]: false })
    ),
    {}
  ) //  {0: false, 1: false, 2: false, 3: false}

  const [checkboxes, setCheckboxes] = useState(initialState)
}

現在我們已經處理好了 state，我們只需要編寫我們的onChange處理程序。

const handleToggle = (event: ChangeEvent<HTMLInputElement>) => {
  const { checked, name } = event.target
  setCheckboxes(prevState => ({
    ...prevState,
    [name]: checked,
  }))
}

並產生您的回報：

return (
  <div className="App">
    {/* in case your id does not match index, use Object.entries instead */}
    {Object.values(checkboxes).map((isChecked, index) => (
      <TableRow key={index}>
        <TableCell align="left>
          <Checkbox
            name={index}
            checked={isChecked}
            onChange={handleToggle}
          />
        </TableCell>
      </TableRow>
    ))}
  </div>
);

這是一個有效的代碼框示例：