React+TypeScript开发多页注册表单时handleChange功能异常如何解决？

1. 为什么需要给FullName组件传入handleChange #

你当前的多页注册表单采用的是「上层App组件统一托管所有表单状态」的设计，所有步骤收集的姓名、手机号、邮箱数据都存在App的state中，子组件（姓名收集页）只负责UI渲染和用户交互触发，本身不维护独立的表单状态。所以必须把App中定义的状态修改函数通过props传递给子组件，子组件检测到输入变化时调用该函数，才能把最新的输入值同步到上层的公共状态中。

2. TypeScript中实现按输入框name区分的handleChange方法 #

优先把所有表单字段整合为一个state对象，比拆分多个独立useState更易维护，写法和你之前JS的逻辑完全一致，只需要补充类型定义即可：

// App.tsx 中定义表单状态和处理函数
import { useState } from 'react';

// 先定义表单整体的类型
interface FormDataType {
  firstName: string;
  lastName: string;
  phone: string;
  email: string;
  // 后续其他表单字段可以继续扩展
}

function App() {
  const [formData, setFormData] = useState<FormDataType>({
    firstName: '',
    lastName: '',
    phone: '',
    email: ''
  });
  const [step, setStep] = useState(0);

  // 通用输入变化处理函数
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target) return;
    const { name, value } = e.target;
    // 按输入框的name属性匹配对应字段更新state
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  // 其他逻辑省略，比如步骤切换、提交逻辑
}

子组件的输入框需要补充name属性，和formData里的字段名完全对应：

// FullName 子组件内的输入框写法
<input
  id="firstName"
  name="firstName" // 必须和formData里的字段名一致
  type="text"
  value={props.firstName}
  onChange={props.handleChange}
/>
<input
  id="lastName"
  name="lastName" // 必须和formData里的字段名一致
  type="text"
  value={props.lastName}
  onChange={props.handleChange}
/>

如果你坚持要保留拆分的独立useState写法，也可以在handleChange里做分支判断：

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;
  if (name === 'firstName') {
    setFirst(value);
  } else if (name === 'lastName') {
    setLast(value);
  }
};

注意：你现有代码里firstName输入框绑定了value={last}属于逻辑错误，需要对应绑定各自的value值。

3. 组件调用的补充写法 #

因为你定义的Props接口要求必须传入firstName、lastName、handleChange三个参数，所以App中调用组件的代码补充为：

// 整合state写法对应传参
<FullName 
  firstName={formData.firstName} 
  lastName={formData.lastName} 
  handleChange={handleChange} 
/>

如果是拆分独立useState的写法，对应传参：

<FullName 
  firstName={first} 
  lastName={last} 
  handleChange={handleChange} 
/>

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