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

Question

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

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，而是我得到“ 属性 '0' 在类型 'EventTarget' 上不存在”和“属性 'usernameInput' 在类型 'EventTarget' 上不存在”

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

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

Accessing event.target.elements property in typescript from a form submit event

event-handling

typescript

reactjs