React父组件实现表单验证：子组件输入事件如何传递给父组件？

一、把useState放在父组件的做法完全正确 #

登录相关的账号、密码状态需要在父组件的提交逻辑和子组件的输入控件之间共享，将状态提升到共同的父组件是React处理跨组件状态共享的标准方案，这样父组件可以统一管控状态，也能方便后续在其他验证场景中复用这些状态值。

二、实现输入事件向父组件传递的具体方案 #

1. 调整父组件：传递状态更新函数与提交函数给子组件 #

父组件需要把状态的更新方法、当前状态值，以及登录处理函数作为props传给子组件，让子组件能触发状态更新和提交操作。

修改后的父组件代码：

import { useState } from "react";
import Child from './Child'
import "./styles.css";

export default function Parent() {
  // 初始值用空字符串比null更合理，避免输入时出现类型异常
  const [login, setLogin] = useState(""); 
  const [password, setPassword] = useState("");
  
  const loginhandler = ()=>{
    // 修正验证逻辑：只要账号或密码为空就提示错误
    if (!login.trim() || !password.trim()){ 
      console.log("请完整输入账号和密码");
    } else {
      console.log(`登录成功，账号：${login}`);
    }
  }

  return (
    <>
      <Child 
        login={login}
        setLogin={setLogin}
        password={password}
        setPassword={setPassword}
        onLogin={loginhandler}
      />
    </>
  );
}

2. 修改子组件：接收props并绑定到输入控件 #

子组件接收父组件传来的props，将输入框的value和onChange与父组件的状态、更新函数绑定，同时添加提交按钮触发父组件的登录处理逻辑（注意你原代码里子组件误写为Parent，需改为Child）。

修正后的子组件代码：

import "./styles.css";

// 通过解构赋值接收父组件传递的props
export default function Child({ login, setLogin, password, setPassword, onLogin }) {
  return (
    <>
      <input
        placeholder="账号"
        value={login}
        onChange={(e) => setLogin(e.target.value)}
      />
      <input
        placeholder="密码"
        value={password}
        type="password"
        onChange={(e) => setPassword(e.target.value)}
      />
      {/* 添加登录按钮，点击时触发父组件的处理函数 */}
      <button onClick={onLogin}>登录</button>
    </>
  );
}

补充优化建议 #

• 如果不想直接传递setLogin这类原生更新函数，也可以在父组件封装自定义处理逻辑，比如实时验证账号格式：

  // 父组件新增
  const handleLoginInput = (e) => {
    const value = e.target.value;
    setLogin(value);
    // 这里可以加实时验证，比如限制账号长度
    if (value.length > 16) {
      console.log("账号长度不能超过16位");
    }
  }
  // 传给子组件时替换成这个函数
  <Child onLoginInput={handleLoginInput} ... />
  

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