如何验证动态数组中的文本字段

Question

我有一个母亲组成部分和一个孩子组成部分。在子组件中，有两个文本字段（名称和电子邮件）和一个添加按钮。当用户按下添加时，将呈现一组新的相同文本字段。我将这些文本字段保存在数组的母亲组件中。我想有一个验证功能，该值的检查是有效的。如果不是，我想给错误道具一个真实的值，以便用户可以看到该字段是错误的。我唯一的问题是弄清楚如何给数组中正确的文本字段错误值。因为现在每个文本字段都将获得错误值。

子组件：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import AddIcon from '@material-ui/icons/Add';
import Minus from '@material-ui/icons/Delete';
import Button from '@material-ui/core/Button';

class People extends React.Component {
constructor(props){
    super(props);

}
render(){
    const {classes} = this.props; 
    return (
    <div>
        {this.props.people.map((person, index) => (
        <div key={person}>
            <div className="container">
                <div className="row">
                    <div className="col s2">
                            <Button 
                            mini
                            variant="fab" 
                            color="primary"
                            aria-label="minus" 
                            onClick={e =>
                            this.props.removeRow(index)}
                            data-toggle="tooltip"
                            >
                            <Minus/>
                        </Button>
                        </div>
                <div>
                <div className="col s5">
                        <TextField
                        name="name"
                        id="standard-dense"
                        label="Teamlid naam"
                        margin="dense"
                        value={person.name}
                        error={e =>
                        this.props.validate(e, index)}
                        onChange={e =>
                        this.props.onChange(e, index)}
                    />
                    </div>
                    <div className="col s5">
                        <TextField
                        name="email"
                        id="standard-dense"
                        label="Teamlid email"
                        margin="dense"
                        value={person.email}
                        error={e =>
                        this.props.validate(e, index)}
                        onChange={e =>
                        this.props.onChange(e, index)}
                    />
                    </div>
                </div>
                </div>
            </div>
        </div>
        ))}
        <div className="container">
            <div className="row">
                <div className="col s2">
                <Button 
                    mini
                    variant="fab" 
                    color="primary" 
                    aria-label="Add" 
                    onClick={this.props.addRow}
                    data-toggle="tooltip"
                    className="btn btn-xs btn-primary"
                    data-original-title="">
                    <AddIcon/>
                </Button>
                </div>
                <div className="col s5">

                </div>
                <div className="col s5">

                </div>
            </div>
        </div>

    </div>
    );
}
};

export default People;

主要成分：

    import React, {Component} from 'react';
import People from './People';

class Form extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            people: []
        }
    }
    addRow = () => {
        this.setState(previousState => {
        return {
            people: [...previousState.people, {name: "", email: "", error:false}]
        };
        });
    };

    removeRow = index => {
        this.setState(previousState => {
        const people = [...previousState.people];
        people.splice(index, 1);
        return { people };
        });
    };

    //onChange functie van de teamleden rijen 
    onChange = (event, index) => {
        const { name, value } = event.target;

        this.setState(previousState => {
        const people = [...previousState.people];
        people[index] = { ...people[index], [name]: value };
        return { people };
        });
    };

    validate = (event,index) => {
        event.preventDefault();

        if(!event.target.value){
        return true;
        }else{
            return false;
        }
    };

    render(){
        const {classes} = this.props;
        return(
            <form>
                <People
                    addRow={this.addRow}
                    removeRow={this.removeRow}
                    onChange={this.onChange}
                    people={this.state.people}
                    validate={this.validate}
                />
                <button onClick={this.validate}>Validate</button>
            </form>
        );
    }
}

export default Form;

我知道validate函数可能需要错误文本字段的索引。但是我不知道如何正确实施它。