如何在 React 應用程序中將道具傳遞給 typescript 的子組件？

Question

我是新手，正在努力解決 typescript 問題。我正在嘗試將 handleSubmit 和 handleChange 道具傳遞給我的子組件，但它一直給我一些錯誤。

在我的父組件中， handleSubmit 和 handleChange 都向我顯示類似的錯誤：

類型“(event: ChangeEvent) => void”不可分配給類型“(e: ChangeEvent | undefined) => void”。 參數類型“event”和“e”不兼容。 輸入 'ChangeEvent | undefined' 不可分配給類型 'ChangeEvent'。 類型“未定義”不可分配給類型“ChangeEvent”.ts(2322)

 import React, { MouseEvent, useState, ChangeEvent } 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<HTMLButtonElement>) => { switch (event.target.name) { case "country": setName(event.target.value); break; default: } }; const handleSubmit = async (event: MouseEvent) => { event.preventDefault(); await axios.post(`http://localhost:3000`, { name, }) }; return ( <div> //handleChange and handleSubmit has errors here <InputForm name={name} handleChange={handleChange} handleSubmit={handleSubmit}/> </div> ); };

這是我的子組件（輸入表單），我在其中嘗試使用 handleSubmit 和 handleChange 道具。 輸入部分下的 onSubmit 向我顯示錯誤：

“類型 '(e: FormEvent) => void' 不可分配給類型 'FormEventHandler'。參數類型 'e' 和 'event' 不兼容。類型 'FormEvent' 不可分配給類型 'FormEvent'.ts(2322 ）“

 interface currUser { name: string; handleChange: (e: React.ChangeEvent<HTMLInputElement> | undefined) => void; handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void; } export default function InputForm({ name, handleChange, handleSubmit }: currUser) { return ( <div> <form> <label placeholder="name">Name</label> <input type="text" placeholder="Test" name="name" value={name} onChange={handleChange} onSubmit={handleSubmit} /> </form> </div> ); }

我該如何解決？ 非常感謝你。

Answer 1

首先，在您的父母中，您為 handleChange 事件 (e) 參數提供了錯誤的元素類型。 父組件的更新版本：

 import React, { MouseEvent, 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 "country": setName(event.target.value); break; default: } }; const handleSubmit = async (event: FormEvent<HTMLFormElement>) => { event.preventDefault(); await axios.post(`http://localhost:3000`, { name, }) }; return ( <div> //handleChange and handleSubmit has errors here <InputForm name={name} handleChange={handleChange} handleSubmit={handleSubmit}/> </div> ); };

您應該將 onSubmit 事件添加到不輸入的表單標簽中。 這是子組件的更新版本：

 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 placeholder="name">Name</label> <input type="text" placeholder="Test" name="name" value={name} onChange={handleChange} /> </form> </div> ); }