验证 ReactJs 中的动态表单字段

问题描述

我在验证动态表单字段（可以添加或减少）时遇到问题，我尝试使用 following library（React Bootstrap4 表单验证）进行验证，但错误消息总是出现：Uncaught TypeError: firstErrorInput is undefined 在控制台中，谁能帮助我，或提供另一种方法来创建动态表单字段以及如何进行验证？下面的链接图片是我想要的结果的一个例子。提前致谢。

Example of the result I want

这是我的代码：

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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）