javascript - 验证 ReactJs 中的动态表单字段

问题描述

我在验证动态表单字段时遇到问题（可以添加或减少），我尝试使用以下库（React Bootstrap4 Form Validation）进行验证，但总是出现错误消息：Uncaught TypeError: firstErrorInput is undefined in the console, can任何人都可以帮助我，或者提供另一种方法来创建动态表单字段以及如何进行验证？下面的链接图片是我想要的结果的一个例子。先感谢您。

我想要的结果示例

这是我的代码：

import React, { useState, useEffect, useRef } from "react";
import { ValidationForm, TextInput } from 'react-bootstrap4-form-validation';

function ModalProductSpec () {
    const [inputList, setInputList] = useState([{ product_specTitle: "", product_specDescription: "" }]);
    const [loader, setLoader] = useState(false);
    const formRefs = useRef();

    const handleInputChange = (e, index) => {
        const { name, value } = e.target;
        const list = [...inputList];
        list[index][name] = value;
        setInputList(list);
    };

    const handleAddClick = () => {
        setInputList([...inputList, { product_specTitle: "", product_specDescription: "" }]);
    };

    const handleRemoveClick = index => {
        const list = [...inputList];
        list.splice(index, 1);
        setInputList(list);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        setLoader(true);
        console.log(inputList);
    }

    return (
        <div className="modal fade" id="modal-product-add-spec" tabIndex="-1" role="dialog" aria-hidden="true">
        <div className="modal-dialog modal-xl" role="document">
            <div className="modal-content">
                <div className="modal-header bg-danger">
                    <h5 className="modal-title">Add Specification Product</h5>
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <ValidationForm onSubmit={handleSubmit} ref={formRefs}>
                    <div className="modal-body">
                        {
                            inputList.map(( field, index ) => {
                                return (
                                <div key={index}>
                                    <div className="row form-group mb-1" >
                                        <div className="col-lg-2 col-sm-2 col-md-2">Spec Title :</div>
                                        <div className="col-lg-2 col-sm-2 col-md-2">
                                            <TextInput type="text" className="form-control" name="product_specTitle" autoComplete="off" 
                                            value={field.product_specTitle} onChange={e => handleInputChange(e, index)} required/>
                                        </div>
                                        <div className="col-lg-2 col-sm-2 col-md-2">Spec Description :</div>
                                        <div className="col-lg-5 col-sm-5 col-md-5">
                                            <TextInput type="text" className="form-control" name="product_specDescription" autoComplete="off" 
                                            value={field.product_specDescription} onChange={e => handleInputChange(e, index)} multiline rows="5" required/>
                                        </div>
                                        <div className="col-lg-1 col-sm-1 col-md-1 align-self-center">
                                        {inputList.length !== 1 && <button className="btn btn-danger btn-sm mr-1 mt-1 mt-md-0" onClick={() => handleRemoveClick(index)}><i className="fa fa-minus"></i></button>}
                                        {inputList.length - 1 === index && <button className="btn btn-primary btn-sm mt-1 mt-md-0" onClick={handleAddClick}><i className="fa fa-plus"></i></button>}
                                        </div>
                                    </div> <hr />
                                </div>
                                )
                            })
                        }


                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" className="btn btn-danger">
                            {!loader ? ('Save') : (<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>) }
                        </button>
                    </div>
                </ValidationForm>
            </div>
        </div>
    </div> 
    )
}

export default ModalProductSpec;

标签： javascriptreactjsvalidationbootstrap-4dynamic-forms

javascript - 验证 ReactJs 中的动态表单字段

问题描述

解决方案

推荐阅读