使用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'”。

以下是TypeScript代码:

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'.

我如何访问这些属性？

- opensas

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>
    );
};

- CertainPerformance

---

是的，我正在使用useState方法，只是想知道ts的等效方法。顺便说一句，event.currentTarget.usernameInput可以正常工作，但是event.currentTarget.elements.usernameInput会给我一个“在类型'HTMLFormControlsCollection'上不存在属性'usernameInput'。”的错误。 - opensas