javascript - 在 react 中用复选框填充Json表并根据JSON数据检查它们

Question

我正在从这样的 JSON 在 React 中创建一个表:

[
    {
        "Id_side": 123,
        "Name_side": "R4",
        "Name_cycle": "C1"
    },
    {
        "Id_side": 345,
        "Name_side": "M1",
        "Name_cycle": "C2"
    },
    {
        "Id_side": 567,
        "Name_side": "V5",
        "Name_cycle": "C3"
    },
    {
        "Id_side": 45,
        "Name_side": "U4",
        "Name_cycle": "C4"
    }
]

表格，我是这样渲染的:

import tableData from "./actions/tableData.json"

const BrandTable = () => {
  
  let tb_headers = tableData.map((item)=>{
    return(
      <td key={item.Id_side}>{item.Name_cycle}</td>
    )
  })
  //  this function is only for testing, I know it does not achieve anything. 
  function renderChecks() {
    console.log("checkbox")
    for (var i = 0; i < tableData.length; i++){
      return <td><input type="checkbox" value="Test" /></td>
  } }

  let tb_data = tableData.map((item)=>{
    return(
      <tr key={item.Id_side}>
        <td>{item.Name_side}</td>
        {renderChecks()}
      </tr>
    )
  })

  return(
    <table id="table">
      <thead>
      <tr>
        <td></td>
        {tb_headers}
        </tr>
      </thead>
      <tbody>
        {tb_data}
      </tbody>
    </table>
    
  )
 
};

export default BrandTable; 

目前我只能得到这样一张表: Table1

但我想要做的是制作一个表格，其中包含所有单元格中的复选框，并在它们进入 JSON 时检查它们。例如，根据我在上面显示的 JSON，表格应该如下所示: table2

我需要每个 header 在每个存在的循环中都有复选框，并且这些是否被激活取决于它们是否在 json 中组合在一起。

Answer 1

你可以像下面那样做:

const cells = ['C1', 'C2', 'C3', 'C4'];

export default function App() {
  return (
    <div>
      <table border="1" style={{ width: '100%' }}>
        <thead>
          <th></th>
          <th> C1</th>
          <th> C2</th>
          <th> C3</th>
          <th> C4</th>
        </thead>
        <tbody>
          {data.map((item) => {
            return <TableRow data={item} key={item.id} />;
          })}
        </tbody>
      </table>
    </div>
  );
}

const TableRow = ({ data }) => {
  return (
    <tr>
      <td> {data.Name_side} </td>{' '}
      {cells.map((cell) => {
        return (
          <td key={cell}>
            <input
              type="checkbox"
              checked={data.Name_cycle === cell}
              // add event listener
            />
          </td>
        );
      })}
    </tr>
  );
};

示例:Working demo