从表单提交事件访问typescript中的event.target.elements属性

Question

我有以下React代码，可以在JavaScript中正常工作：

function handleSubmit(event) {
event.preventDefault()
console.dir(event.target[0].value)
console.dir(event.target.usernameInput.value)'EventTarget'.
console.dir(event.target.elements.usernameInput.value)
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="usernameInput">Username:</label>
<input id="usernameInput" type="text" onChange={handleChange} />
[...]

我想对TypeScript做同样的操作，但我无法访问event.target[0]、event.target.elements或event.target.usernameInput，而是得到"类型"EventTarget"上不存在属性"0"以及"；类型"EventTarget"上不存在属性"usernameInput">

这是ts代码：

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
console.dir(event.target[0].value) // Property '0' does not exist on type 'EventTarget'.
console.dir(event.target.usernameInput.value) // Property 'usernameInput' does not exist on type 'EventTarget'.
console.dir(event.target.elements.usernameInput.value) // Property 'elements' does not exist on type 'EventTarget'.

如何访问这些属性？

Answer 1

如果您想在TypeScript中获得对表单的引用，请使用currentTarget而不是target:

const form = event.currentTarget;
// do stuff with form
// form[0] will be typed as Element, which you can cast to an HTMLInputElement

但在React中检查表单值的更好方法是使用受控组件，并在提交时查看与值对应的有状态变量：

const App = () => {
const [username, setUsername] = useState('');
const handleSubmit = () => {
console.log(username);
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="usernameInput">Username:</label>
<input
id="usernameInput"
value={username}
onChange={(e) => { setUsername(e.currentTarget.value); }}
/>
</form>
);
};