如何在React中应用超级简单的输入验证

Question

不久前，我从ES6开始使用+ React，在此表单上应用验证方法遇到了困难，我正在使用Validator.js，问题不是语法，而是如何/在何处在状态和道具之间以及何时通过这些验证的方法。

我构建的表单如下：

在调用App.js作为子组件调用FormErrors的ComponentForm中，我已经开始声明字段，但是我不知道在哪里应用验证，我很乐意从简单的FormErrors组件中获得传入的错误。

为了简洁起见，已经删除了无关的consts/vars (api键、电子邮件消息等)。

我的表格：

import React, {Component} from 'react';
import validator from 'validator';
import FormError from './FormErrors';
const sgMail = require('@sendgrid/mail');

//require('../.env').config();

class ComponentForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fName: '',
            lName: '',
            email: '',
            tel: '',
            formErrors: {
                email: 'Please Enter a correct Email',
                name: 'Names are only Alphabet characters',
                tel: 'Telephone is only numeric'
            },
            emailValid: false,
            nameValid: false,
            telValid: false
        };

        const SENDGRID_API_KEY = "bla bla";
        sgMail.setApiKey(SENDGRID_API_KEY);

        this.changeValue = this.changeValue.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    };

    changeValue = event => {
        this.setState({
            [event.target.name]: event.target.value,
        });
    };

    onSubmit = (event) => {
        event.preventDefault();
        if ( !validator.isEmail(this.state.email)){
            console.log('email is NOT valid!');
        }

        const msg = {bla:bla};
        //sgMail.send(msg);
        console.log('mail sent!');
    };

    render() {
        return (
            <form>
                <input
                    placeholder="First Name"
                    value={this.state.fName}
                    name="fName"
                    onChange={event => this.changeValue(event) }
                    onKeyPress={this._handleKeyPress}
                /><br/><br/>
                <input
                    placeholder="Last Name"
                    value={this.state.lName}
                    name="lName"
                    onChange={event => this.changeValue(event)}
                /><br/><br/>
                <input
                    placeholder="Email"
                    value={this.state.email}
                    name="email"
                    onChange={event => this.changeValue(event)}
                    error={this.state.emailError}
                /><br/><br/>
                <input
                    placeholder="Telephone Number"
                    value={this.state.tel}
                    name="tel"
                    onChange={event => this.changeValue(event)}
                /><br/><br/>
                <button onClick={(event) => this.onSubmit(event)}>Submit</button>
                <FormError error={this.state.errorType} />
            </form>
        );
    }
}

export default ComponentForm;

FormError组件

import React, {Component} from 'react';

const spacing = 10;
const color = 'red';

class FormErrors extends Component {

    render() {
        return (
            <div style={{marginTop: spacing + 'px', color: color}}>Error Message</div>
        );
    };
}
export default FormErrors;

因此，FormError拥有验证逻辑并应用它有意义吗？

这听起来可能很糟糕，但我仍然对在组件之间传递/更改状态感到困惑，状态/支持方法从一个示例更改到另一个示例，所以我非常乐意获得最简单的示例--如何在这里应用验证，而不是花哨/速度，只想理解和应用这一点。

非常感谢

Answer 1

与FormError组件不同，我将定义一个formError助手函数，它将获得要验证的值和字段类型。根据返回值，您将在呈现表单的父组件中呈现/不呈现错误消息。

如果您想要定义一个将导致错误的子组件，您也可以这样做，通过验证结果和字段类型，这样它就可以呈现/不呈现错误消息。