React 多表格数据选择：将选中数据收集到一个数组中

在 React 中，你可以通过创建一个数组来存储选中的数据。以下是一个示例：\n\njsx\nimport React, \{ useState \} from \"react\";\n\nfunction App() {\n const [selectedData, setSelectedData] = useState([]);\n\n // 假设从后端返回的多个table的数据\n const table1Data = [\n { id: 1, name: \"John\" },\n { id: 2, name: \"Jane\" },\n { id: 3, name: \"Mike\" }\n ];\n const table2Data = [\n { id: 4, name: \"Alice\" },\n { id: 5, name: \"Bob\" },\n { id: 6, name: \"Tom\" }\n ];\n\n // 处理选中数据的函数\n const handleSelectData = (tableData) => (event) => {\n const selectedId = parseInt(event.target.value);\n const selectedRow = tableData.find((row) => row.id === selectedId);\n\n setSelectedData((prevSelectedData) => [...prevSelectedData, selectedRow]);\n };\n\n return (\n <div>\n <h1>Selected Data:</h1>\n <ul>\n {selectedData.map((row) => (\n <li key={row.id}>{row.name}</li>\n ))}\n </ul>\n\n <h2>Table 1:</h2>\n <table>\n <thead>\n <tr>\n <th>ID</th>\n <th>Name</th>\n </tr>\n </thead>\n <tbody>\n {table1Data.map((row) => (\n <tr key={row.id}>\n <td>{row.id}</td>\n <td>\n <input\n type=\"checkbox\"\n value={row.id}\n onChange={handleSelectData(table1Data)}\n />\n {row.name}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n\n <h2>Table 2:</h2>\n <table>\n <thead>\n <tr>\n <th>ID</th>\n <th>Name</th>\n </tr>\n </thead>\n <tbody>\n {table2Data.map((row) => (\n <tr key={row.id}>\n <td>{row.id}</td>\n <td>\n <input\n type=\"checkbox\"\n value={row.id}\n onChange={handleSelectData(table2Data)}\n />\n {row.name}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n}\n\nexport default App;\n\n\n在上述示例中，我们使用useState来创建一个名为selectedData的状态变量和一个名为setSelectedData的状态更新函数。我们通过调用setSelectedData来更新选中的数据数组。\n\n我们使用handleSelectData函数来处理选中数据的逻辑。该函数接收一个表格数据数组作为参数，并返回一个事件处理函数。当复选框的状态发生变化时，该事件处理函数会被触发。我们通过event.target.value获取选中的复选框的值，并根据这个值从表格数据数组中找到相应的行数据。然后，我们将这个选中的行数据添加到selectedData数组中，使用展开运算符(...)来确保添加新数据时不会修改原有数据。\n\n在渲染部分，我们展示了选中的数据和两个表格。对于每个表格行，我们都在其后添加了一个复选框，并将复选框的值设置为行数据的ID。当复选框的状态发生变化时，会调用handleSelectData函数，并传入相应的表格数据数组。这样，当用户选择复选框时，相应的行数据将被添加到selectedData数组中。\n\n你可以根据实际需求修改上述示例来适应你的后端返回的多个table的数据结构和样式。