React新手求助：MailInput子组件输入值无法传递给父组件

你的代码存在两个核心问题，导致无法正常获取输入框内容：

1. 事件参数未正确传递 #

在ProfileBody中调用MailInput时，你用箭头函数包裹handleChangeEmail但没有传递事件对象e，导致handleChangeEmail里的e是undefined，自然无法读取e.target.value。

修复方式：
直接把handleChangeEmail作为props传递，或者在箭头函数中显式传递事件参数：

// 两种写法都有效
<MailInput redirect={handleChangeEmail}/>
// 或者
<MailInput redirect={(e) => handleChangeEmail(e)}/>

2. useState异步更新的误区 #

setEmail是异步操作，调用setEmail后立刻console.log(email)，打印的是更新前的旧值，而非最新输入的内容。

修复方式：
如果需要查看实时输入值，直接打印e.target.value即可；如果要追踪状态更新后的最新值，用useEffect监听email变化：

import { useState, useEffect } from 'react';

function ProfileBody() {
  const [email, setEmail] = useState("");
  // ...其他状态定义

  const handleChangeEmail = (e) => {
    setEmail(e.target.value);
    // 打印输入框实时值
    console.log('当前输入:', e.target.value);
  }

  // 监听email状态变化，打印最新值
  useEffect(() => {
    console.log('更新后的邮箱状态:', email);
  }, [email]);

  // ...其他代码
}

修改后的完整代码 #

MailInput组件（无需修改） #

function MailInput(props) {
  return (
    <div className="mail-input">
      <input
        type="email"
        placeholder="Enter your email"
        className="mail-input"
        onChange={props.redirect}
      />
    </div>
  );
}

export default MailInput;

ProfileBody组件 #

import { useState, useEffect } from 'react';
// 导入你的其他组件和CreateUser方法

function ProfileBody() {
  const [email, setEmail] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleChangeEmail = (e) => {
    setEmail(e.target.value);
    console.log('当前输入的邮箱:', e.target.value);
  }

  useEffect(() => {
    console.log('更新后的邮箱状态:', email);
  }, [email]);

  const handleSubmit = (e) => {
    e.preventDefault();
    CreateUser(email, username, password);
  };

  return (
    <div className="profile-div">
      <ProfileCard img={pdp}/>
      <h1 className="mail-title">Email :</h1>
      {/* 修复事件传递 */}
      <MailInput redirect={handleChangeEmail}/>
      <h1 className="password-title">Mot de passe :</h1>
      <PasswordInput />
      <Button height="50px" width="50px" redirect={handleSubmit} />
      <Insta />
      <Face />
    </div>
  )
}

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