handlessubmit可以在Javascript中工作，但不能在Typescript react中工作

Question

我试图使用外部函数在react中处理表单提交事件，我在Typescript react中得到此错误消息。

Parameter 'event' implicitly has an 'any' type.ts(7006)

代码如下:

function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}

这在常规javascript或onClick()内部的回调函数中工作得很好。然而在Typescript中，它带来了一个问题。我该如何解决这个问题?

Answer 1

首先，您需要绑定onSubmit函数并使用React定义事件参数的类型。SyntheticEvent，按照下面的代码片段执行:

function Form() {
const handleSubmit = (e: React.SyntheticEvent) => {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}

更多细节，请查看这个伟大的资源react-typescript-cheatsheet。