React继承Component的类组件中如何声明并调用表单验证函数？

核心错误原因 #

1. 类组件里不能用function关键字直接定义成员方法，这不符合ES6类语法规范，类的方法需要用类成员写法或箭头函数。
2. 调用类内部方法必须加this.，你代码里直接写ValidateValues(formData)会找不到该函数。
3. ValidateValues函数没返回错误对象，就算验证逻辑正确，也拿不到结果。
4. 错误信息键名写错：验证的是firstName，却把错误存在errors.email里，应该是errors.firstName。
5. state没初始化表单字段，输入框value取值时会出现undefined，触发React警告。

修正后的完整代码 #

import './App.css';
import { Component } from 'react';

class App extends Component {
    // 初始化表单相关state字段
    state = {
        rentalCars: [],
        firstName: '',
        lastName: '',
        dateOfBirth: '',
        startDate: '',
        endDate: '',
        selectCar: ''
    };

    async componentDidMount() {
        await this.getRentalCars();
    }

    async getRentalCars() {
        const response = await fetch('/rent');
        const data = await response.json();
        console.log("GetRentalCars received from database: " + JSON.stringify(data));
        this.setState({ rentalCars: data });
    }

    // 同步输入框值到state，规范受控组件写法
    handleInputChange = (event) => {
        const { name, value } = event.target;
        this.setState({ [name]: value });
    }

    render() {
        const { rentalCars, firstName, lastName, dateOfBirth, startDate, endDate, selectCar } = this.state;
        const optionItems = rentalCars.map(({ id, carName, rentalPricePerDay }) =>
            <option key={id} value={carName}> {carName}: {rentalPricePerDay} SEK/day</option>)

        return (
            <div className="App">
                <form className="registerForm" onSubmit={this.handleSubmit}>
                    <header className="Rental-cars">
                        <h2>Rent one of our cars!</h2>
                    </header>
                    <label>
                        <p>First name: 
                            <input 
                                type="text" 
                                name="firstName" 
                                value={firstName} 
                                onChange={this.handleInputChange}
                            />
                        </p>
                        <p>Last name: 
                            <input 
                                type="text" 
                                name="lastName" 
                                value={lastName} 
                                onChange={this.handleInputChange}
                            />
                        </p>
                        <p>Date of Birth: 
                            <input 
                                type="date" 
                                name="dateOfBirth" 
                                value={dateOfBirth} 
                                onChange={this.handleInputChange}
                            />
                        </p>
                        <p>I want to rent a car from 
                            <input 
                                type="date" 
                                name="startDate" 
                                value={startDate} 
                                onChange={this.handleInputChange}
                            />
                            to 
                            <input 
                                type="date" 
                                name="endDate" 
                                value={endDate} 
                                onChange={this.handleInputChange}
                            />
                        </p>
                        <p>Car I wish to rent:
                            <select 
                                name="selectCar" 
                                value={selectCar}
                                onChange={this.handleInputChange}
                            >
                                {optionItems}
                            </select>
                        </p>
                    </label>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    }

    handleSubmit = (event) => {
        event.preventDefault();
        // 直接从state取表单数据，比遍历DOM更可靠
        const formData = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            dateOfBirth: this.state.dateOfBirth,
            startDate: this.state.startDate,
            endDate: this.state.endDate,
            selectCar: this.state.selectCar
        };
        // 通过this调用类内部验证方法
        let validationErrors = this.validateValues(formData);
        console.log('formData', formData);
        console.log('validationErrors', validationErrors);
        // 这里可以根据错误对象显示错误提示或提交表单
    }

    // 类成员方法形式定义验证函数（小驼峰命名符合React规范）
    validateValues(inputValues){
        let errors = {};
        // 完善验证逻辑：先判断是否为空，再判断长度
        if(!inputValues.firstName || inputValues.firstName.length < 2 || inputValues.firstName.length > 15) {
            errors.firstName = "您必须输入2-15位的有效名字。";
        }
        // 验证名字不能是纯数字
        if(!isNaN(parseInt(inputValues.firstName))) {
            errors.firstName = "名字不能包含数字。";
        }
        // 返回错误对象，否则调用后得到undefined
        return errors;
    }
}

export default App;

关键修正点说明 #

• 类方法定义：把function ValidateValues改成类成员方法validateValues，调用时必须加this.。
• state初始化：添加所有表单字段的初始空值，避免React警告。
• 受控组件优化：新增handleInputChange方法，让输入框值同步到state，这是React表单的标准写法，比直接操作DOM更稳定。
• 验证函数返回值：必须return errors;，否则无法获取验证结果。
• 错误键名修正：将errors.email改为errors.firstName，对应表单字段。
• 命名规范：函数名改用小驼峰validateValues，符合JS/React的命名习惯。

内容的提问来源于stack exchange，提问作者Zarkaylia