javascript - 如何在reactjs中验证多表条目应用程序onsubmit

Question

我在这里有一个动态多表数据输入工具应用程序，我需要在单击一个提交按钮时执行验证以进行多个验证/检查以下所有必填字段是否是从 api 获取的示例数据。

export const option = ['pass', 'fail']

export const header = [
    { value: 'SI.NO', label: 'SI.NO' },
    { value: 'SUBJECT', label: 'SUBJECT' },
    { value: 'Assessment', label: 'Assessment' },
    { value: 'Unit_Test', label: 'Unit Test' },
    { value: 'Total', label: 'Total' },
    { value: 'validate', label: 'Validate' },
    { value: 'Remarks', label: 'Remarks' },
]

export const data = [
    { sno: 1, studentName: 'Alex', SUBJECT: 'English', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 2, studentName: 'Alex', SUBJECT: 'Mathematics', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 3, studentName: 'Alex', SUBJECT: 'phy. Science', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 4, studentName: 'Alex', SUBJECT: 'Bio. Science', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 5, studentName: 'Alex', SUBJECT: 'Soical Studies', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 1, studentName: 'Jim', SUBJECT: 'English', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 2, studentName: 'Jim', SUBJECT: 'Mathematics', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 3, studentName: 'Jim', SUBJECT: 'phy. Science', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 4, studentName: 'Jim', SUBJECT: 'Bio. Science', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
    { sno: 5, studentName: 'Jim', SUBJECT: 'Soical Studies', Assessment: '', Unit_Test: '', Total: '', Remarks: '', result: null },
]

验证逻辑

export class Validators {
    static required(value, message) {
        if (!value || !value.toString().trim().length) {
            return { error: true, message };
        }
        return false;
    }
}

const validateInput = (validators, value) => {
if (validators && validators.length) {
    for (let i = 0; i < validators.length; i++) {
        const error = validators[i].check(value, validators[i].message);
        if (error) {
            return error;
        }
    }
}
return false;
};

下面的代码是将数据转换为带有验证和表格结构的表格形式的功能组件，将数据映射到带有每个输入或选择字段的表格中

const options = (data) => (data ? data.map((item, index) => (<option key={index} value={item}>{item}</option>)) : null);

const Table = ({ header, data }) => {
    const [studentdata, setStudentData] = useState(data)
    const [error, setError] = useState(false);

    const handleChange = (event, index, name) => {
        const { value } = event.target;
        setError(validateInput([
            {
                check: Validators.required,
            }
        ], value));
        const newState = studentdata.map((item, i) => {
            if (i === index) {
                return { ...item, [name]: value };
            }
            return item;
        });
        setStudentData(newState)
    }
    return (

        <div className="table-responsive border border-secondary">
            <table className="table table-hover table-bordered table-sm mb-0">
                <thead className="table-bordered">
                    <tr>
                        {header.map(element => {
                            return (
                                <th scope="col" key={element.value} colSpan={element.colSpan}>
                                    <div className="d-flex flex-column">
                                        <div className="p-2 bd-highlight">{element.label}<span className="text-danger">*</span></div>
                                    </div>
                                </th>
                            )
                        })}
                    </tr>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>25</th>
                        <th>25</th>
                        <th>50</th>
                        <th>pass/fail</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {studentdata.map((item, index) => {
                        const { sno, SUBJECT, Assessment, Unit_Test, Total, result, Remarks } = item
                        return (
                            <tr key={sno}>
                                <td>{sno}</td>
                                <td>{SUBJECT}</td>
                                <td>
                                    <input
                                        className={`form-control-sm form-control ${error ? 'is-invalid' : null}`}
                                        type='text'
                                        onChange={(e) => handleChange(e, index, 'Assessment')}
                                        value={Assessment}
                                        required
                                    />
                                </td>
                                <td>
                                    <input
                                        className={`form-control-sm form-control ${error ? 'is-invalid' : null}`}
                                        type='text'
                                        name='Unit_Test'
                                        onChange={(e) => handleChange(e, index, 'Unit_Test')}
                                        value={Unit_Test}
                                        required
                                    />
                                </td>
                                <td>
                                    <input
                                        className={`form-control-sm form-control ${error ? 'is-invalid' : null}`}
                                        type='text'
                                        name='Total'
                                        onChange={(e) => handleChange(e, index, 'Total')}
                                        value={Total}
                                        required
                                    />
                                </td>
                                <td>
                                    <div className="form-group">
                                        <select
                                            className={`form-control-sm form-control ${error ? 'is-invalid' : null}`}
                                            value={result}
                                            name='result'
                                            onChange={(e) => handleChange(e, index, 'result')}
                                            required
                                        >
                                            <option value="">please select</option>
                                            {options(option)}
                                        </select>
                                    </div>
                                </td>
                                <td><input
                                    className={`form-control-sm form-control ${error ? 'is-invalid' : null}`}
                                    type='text'
                                    name='Remarks'
                                    onChange={(e) => handleChange(e, index, 'Remarks')}
                                    value={Remarks}
                                    required
                                /></td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        </div>
    )
}


const TableForm = () => {
    const [groupData, setGroupData] = useState([])

    useEffect(() => {
        let student = data.reduce((r, a) => {
            r[a.studentName] = [...r[a.studentName] || [], a];
            return r;
        }, {});
        setGroupData(student)
    }, [data])

    return (
        <div className="container-fluid mt-3" style={{ paddingBottom: '5rem' }}>
            <h1 className="text-center">Class Report</h1>
            {
                Object.entries(groupData).map((t, k) => {
                    const data = t[1]
                    const student = t[0]
                    return (
                        <div key={k}>
                            <div className="border-top border-bottom my-2">
                                <p className="text-center">{student}</p>
                            </div>
                            <Table data={data} header={header} />
                        </div>
                    )
                })
            }
            <button>Submit</button>
        </div>
    )
}

export default TableForm

在此处输入图像描述

标签： javascriptreactjs