React函数组件返回的输入框无法输入，请求技术解决方案

你的输入框无法输入，核心问题在于handleChange函数没有正确处理输入事件并更新状态：

• 原handleChange没有接收事件参数，无法获取输入框的内容和标识
• 调用setMessage()时没有传递新的状态值，导致状态始终不变

修复后的代码： #

import React, { useState } from "react";

function Pages() {
  const [message, setMessage] = useState({
    name: "",
    email: "",
    phone: "",
  });

  function handleChange(e) {
    // 获取当前输入框的name属性和输入值
    const { name, value } = e.target;
    // 展开原有状态，只更新对应字段的值
    setMessage(prev => ({
      ...prev,
      [name]: value
    }));
  }

  return (
    <div>
      <input
        name="name"
        value={message.name}
        onChange={handleChange}
        type="text"
        placeholder="姓名"
      />

      <input
        name="email"
        value={message.email}
        onChange={handleChange}
        type="email" // 改成email类型，符合语义且适配输入校验
        placeholder="邮箱"
      />

      <input
        name="phone"
        value={message.phone}
        onChange={handleChange}
        type="tel" // 改成tel类型，适配移动端数字键盘
        placeholder="手机号"
      />
    </div>
  );
}

export default Pages;

关键修复点说明： #

• 给handleChange添加事件参数e，通过e.target获取输入框的name（对应状态字段）和value（用户输入内容）
• 使用函数式更新setMessage(prev => ...)，确保基于最新的状态进行修改，避免状态更新滞后问题
• 用扩展运算符...prev保留原有状态的其他字段，只更新当前输入框对应的属性，避免覆盖其他字段值
• 额外优化：调整输入框类型为对应语义化类型，提升用户输入体验

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