reactjs - 从表单提交事件访问 typescript 中的 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’”和“类型‘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>
    );
};