React TypeScript项目中如何传递Props给子组件并修复类型错误？

咱们逐个解决这些类型错误：

1. 子组件核心错误修正 #

（1）onSubmit事件绑定位置错误 #

子组件里把onSubmit绑在了<input>上，这是错误的——表单提交事件必须绑定在<form>标签上，<input>本身没有onSubmit属性。

（2）handleChange类型冗余定义 #

子组件接口里给handleChange的参数加了| undefined，但React触发onChange时绝对不会传入undefined，直接删掉这个冗余类型即可。

修正后的子组件代码：

import React from "react";

interface currUser {
  name: string;
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

export default function InputForm({ name, handleChange, handleSubmit }: currUser) {
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          type="text"
          placeholder="Test"
          name="name"
          value={name}
          onChange={handleChange}
        />
      </form>
    </div>
  );
}

2. 父组件类型与逻辑修正 #

（1）handleChange事件类型错误 #

父组件里handleChange的参数类型写的是ChangeEvent<HTMLButtonElement>，但实际是处理<input>的change事件，要改成ChangeEvent<HTMLInputElement>。

（2）handleChange逻辑匹配错误 #

父组件switch判断的是"country"，但子组件input的name是"name"，改成case "name"才能正确更新name状态。

（3）handleSubmit事件类型错误 #

父组件里handleSubmit的参数类型是MouseEvent，但表单提交事件对应的是FormEvent<HTMLFormElement>，必须改成这个类型。

（4）完善axios请求逻辑 #

原代码里axios.post没有处理异常和后续逻辑，用try/catch包裹可以避免未处理的Promise错误，还能添加提交成功后的导航或提示逻辑。

修正后的父组件代码：

import React, { useState, ChangeEvent, FormEvent } from "react";
import InputForm from "./InputForm";
import { useNavigate } from "react-router-dom";
import axios from "axios";

export default function Form() {
  const [name, setName] = useState("");
  const navigate = useNavigate();

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    switch (event.target.name) {
      case "name":
        setName(event.target.value);
        break;
      default:
    }
  };

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    try {
      await axios.post(`http://localhost:3000`, { name });
      // 提交成功后可添加导航或提示
      navigate("/success");
    } catch (err) {
      console.error("提交失败:", err);
    }
  };

  return (
    <div>
      <InputForm name={name} handleChange={handleChange} handleSubmit={handleSubmit} />
    </div>
  );
};

错误根源总结 #

这些类型错误本质是事件类型不匹配和组件事件绑定位置错误：

• 父组件定义的事件类型与子组件要求的类型不一致
• 表单提交事件绑定到了错误的元素上
• 冗余的undefined类型定义导致类型兼容问题

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