javascript - ReactJS - 输入验证不验证

问题描述

我正在尝试对我的表单进行验证。

class Car extends Component {
    constructor() {
        super();
        this.state = {
            name: '',
            errors: {}
        }
     this.handleNameChange = this.handleNameChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.errors) {
            this.setState({
                errors: nextProps.errors
            });
        }
    }

    handleNameChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    handleSubmit(e) {
        e.preventDefault();
        const car = {
            name: this.state.name,
            ...
        }
        console.log(car);

        axios.post('/api/cars/create', car)
            .then(response => {
                console.log('response.data: ', response.data);

            }).catch(function(err) {
                console.log(err)
            });

    }

    render() {
        const { errors } = this.state;
        console.log('errors name: ', errors.name);
        ...
        return (
            <div className="container" style={{ marginTop: '50px'}}>
                <h2 style={{marginBottom: '40px'}}>Cars</h2>
                <form className="" onSubmit={ this.handleSubmit }>
                    <div className="row">
                        <div className="col-sm-3">
                            <div className="form-group"> 
                                <label>Car Name</label>
                                <input
                                    type="text"
                                    placeholder="Name"
                                    className={classnames('form-control form-control-sm', {
                                        'is-invalid': errors.name
                                    })}
                                    name="name"
                                    onChange={ this.handleNameChange }
                                    value={ this.state.name }
                                />
                                {errors.name && (<div className="invalid-feedback">{errors.name}</div>)}
                            </div>
                        </div>
                        ...
                       );
    }
}
Car = {
    //registerUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
});

export default connect(mapStateToProps,{ registerUser })(withRouter(Car))

然后，在car.js中，我有以下内容：

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const passport = require('passport');
const validateCarInput = require('../validation/car');

const Car = require('../models/Car');

router.post('/create', function(req, res) {
    console.log('in /create');
    console.log('req.body.name: '+req.body.name);

    const { errors, isValid } = validateCarInput(req.body);

    if(!isValid) {
        console.log('hello from validation');
        return res.status(400).json(errors);
    }
    ...

如果我发送的表单包含不正确的字段（空name），我将在此处收到来自控制台的消息hello from validation。这里很好。

这是validations/car.js文件：

const Validator = require('validator');
const isEmpty = require('./is-empty');

module.exports = function validateCarInput(data) {
    let errors = {};
    console.log('x data.name: ', data.name);
    data.name = !isEmpty(data.name) ? data.name : '';

    if(Validator.isEmpty(data.name)) {
        errors.name = 'Name field is required';
        console.log('errors.name: ', errors.name);    
    }

    return {
        errors,
        isValid: isEmpty(errors)
    }
}

有什么问题 - 当我发送带有空name字段的表单时 - 这意味着该字段无效 - 它不能为空 - NodeJS 能够识别这一点，但是对于 ReactJS 组件来说，并没有传递此信息。

在组件中，这行代码console.log('errors name: ', errors.name);总是产生undefined for errors.name- 然后，这个信息永远不会显示在网站上：

{errors.name && (<div className="invalid-feedback">{errors.name}</div>)}

为什么 ReactJS 看不到来自 NodeJS 的消息并且errors.name总是如此undefined？

标签： javascriptnode.jsreactjsvalidation

javascript - ReactJS - 输入验证不验证

问题描述

解决方案

推荐阅读