React表单开发：为Input添加onChange及实现提交校验方法问询

1. 为Input组件添加onChange函数 #

要给Input绑定onChange，需先通过useState声明状态存储输入值，再编写事件处理函数更新状态，最后把事件绑定到input上：

• 声明状态：const [name, setName] = useState('');
• 编写处理函数：接收事件对象，提取输入值并更新状态
• 绑定到input：给input标签添加onChange={handleNameChange}属性

2. 实现表单校验与提交逻辑 #

之前点击提交不管表单是否填写都输出true，核心问题有两个：一是setState是异步操作，直接在调用后console.log拿不到最新值；二是没有对表单内容做校验。以下是修正后的完整代码：

import React from "react";
import { useState } from "react";

const Contact = () => {
    // 存储用户输入的姓名
    const [name, setName] = useState('');

    // 输入框的onChange处理函数：更新输入值
    const handleNameChange = (e) => {
        const inputValue = e.target.value;
        setName(inputValue);
    };

    // 表单提交处理函数
    const handleSubmit = (e) => {
        // 阻止表单默认刷新行为
        e.preventDefault();
        // 校验：姓名不为空则表单有效
        const isFormValid = name.trim() !== '';
        console.log(`Form submitted, ${isFormValid}`);
    };

    return(
        <div className="main">
            <form onSubmit={handleSubmit}>
                <div className="baslik">
                    <div className="container center">
                        <h1>Contact Form</h1>
                    </div>
                </div>
                <div className="field">
                    <label className="text"> Name And Surname: </label>
                    <input 
                        className="form" 
                        placeholder="Kerem Kurt" 
                        required 
                        value={name} 
                        onChange={handleNameChange} 
                    />
                </div>
                <button type="submit" className="button"> Enter </button> 
            </form>
        </div>
    );
};

export default Contact;

关键说明 #

• 用form的onSubmit事件代替按钮的onClick，更符合表单标准交互流程，同时通过e.preventDefault()避免页面刷新。
• 提交时直接校验输入值是否为空（可根据需求扩展规则，比如长度、格式等），根据校验结果输出true或false，避免了setState异步更新导致的取值错误。
• 给input添加value={name}实现受控组件，确保输入值和状态同步。

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