我需要帮助在引导程序的帮助下创建一个反应表

Question

我实际上想为我的反应项目创建这个表，但我在这个项目中面临问题，任何人都可以帮助我，我需要将其作为我部门的一个项目来完成，但我对引导程序不太熟悉，我曾尝试过自己做，我已经设法制作了另一张桌子，但这张特殊的桌子给我带来了问题！

有人可以告诉我如何使数据动态化，就像我需要从列表中获取它一样，表数据如名称，卷号等必须是可编辑的

import React, { useState } from 'react';

function ExamMarksTable() {
    const [data, setData] = useState([
        "To understand the Basics concepts of networking standards, protocols and technologies.",
        "To learn the different signal transmission, multiplexing techniques.",
        "To learn the role of protocols at various layers in the protocol stacks",
        "To learn the different IEEE standards.",
    ]);

    const [editIndex, setEditIndex] = useState(null);
    const [editedData, setEditedData] = useState([...data]);

    const handleEdit = (index) => {
        setEditIndex(index);
        setEditedData([...data]); // Reset edited data
    };

    const handleInputChange = (event, index) => {
        const newData = [...editedData];
        newData[index] = event.target.value;
        setEditedData(newData);
    };

    const handleSave = (index) => {
        setEditIndex(null);
        setData([...editedData]); // Save edited data
    };

    return (
        <div className="container-fluid w-100 border border-danger border-3 mt-4 text-dark">
            <div className="row">
                <div className="col">
                    <div className="row text-dark no-wrap fs-4 d-flex justify-content-center font-weight-bold">
                        <div className="col-1 fs-4 fw-bold border border-2 px-5 py-5">Sr.No</div>
                        <div className="col-1 fs-4 fw-bold border border-2 px-5 py-5">Roll No.</div>
                        <div className="col-1 fs-4 fw-bold border border-2 px-5 py-5">Prn No.</div>
                        <div className="col-3 fs-4 fw-bold border border-2 px-5 py-5">Student Name</div>
                        <div className="col-6 fs-4 fw-bold border border-2 px-2 py-2">
                        <div className="col-12 fs-4 fw-bold px-2 py-2">CO Attainment from University Exam</div>
                        <div className="col-12 fs-4 fw-bold px-2 py-2 d-flex">
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">ESE</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">Mid Sem</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">PR/OR</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">Term Work</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">Total</div>
                        </div>
                        <div className="col-12 fs-4 fw-bold px-2 py-2 d-flex">
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">70</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">30</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">25</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">25</div>
                        <div className="fs-4 fw-bold border border-2 px-2 py-2">150</div>

                        </div>


                        </div>

                    </div>
                    {data.map((item, index) => (
                        <div className="row align-items-center hover-overlay" key={index}>
                            <div className="col-6 border border-2 px-2 py-3 fs-4 w-25 d-inline-flex align-items-center justify-content-start hover-shadow">
                                <span>{`${index + 1}`}</span>
                                <div>
                                    {editIndex === index ? (
                                        <button className="btn btn-success ms-2" onClick={() => handleSave(index)}>Save</button>
                                    ) : (
                                        <button className="btn btn-light border border-3 ms-3" onClick={() => handleEdit(index)}>Edit</button>
                                    )}
                                </div>
                            </div>
                            {editIndex === index ? (
                                <div className="col-5 border border-2 fs-4 px-2 py-3 w-75">
                                    <input type="text" className="form-control fs-5" value={editedData[index]} onChange={(event) => handleInputChange(event, index)} />
                                </div>
                            ) : (
                                <div className="col-5  border border-top-0 border-2 fs-5 px-2 w-75 " style={{ paddingTop: "23px", paddingBottom: "20px", display: "flex", alignItems: "center" }}>{item}</div>
                            )}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

export default ExamMarksTable;

Answer 1

如果您计划使用表来存储数据，则应该将字段存储在对象数组中，以便更好地存储详细信息。

const [data, setData] = useState([
    { rollNo: '001', prnNo: 'PRN001', name: 'John Doe', ese: 70, midSem: 30, prOr: 25, termWork: 25 },
    { rollNo: '002', prnNo: 'PRN002', name: 'Jane Smith', ese: 65, midSem: 28, prOr: 23, termWork: 24 },
]);

我还看到您的表格一次只允许编辑一个字段。尽管这可行，但出于效率目的，我建议允许同时编辑多个字段。您可以将所有数据包装在输入标记“”内的一行中..

<input
    type="text"
    className="form-control"
    value={editedRow.rollNo}
    onChange={(e) => handleInputChange(e, 'rollNo')}
/>

此外，如果您想让总计算动态膨胀，您需要通过计算 Number(ese) + Number(midSem) + Number(prOr) + Number(termWork) 动态求和，并将其显示在“Total”中“场。

<span>{Number(editedRow.ese) + Number(editedRow.midSem) + Number(editedRow.prOr)