访问 React.FormEvent<HTMLFormElement> 的目标的任何索引时出现错误 TS7053

Question

基本上我在关注这个 tutorial，将它转换为 React 和 TypeScript

这是我为 onSubmit 事件编写的代码

const signUp = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();

  // Problematic lines of code
  const email = event.target[0].value;
  const password = event.target[1].value;
};

以及基本注册表单

  return (
    <div>
      <form id="signUp" onSubmit={signUp}>
        <h3>Sign up</h3>
        <label>Email </label>
        <input type="email" name="email" />
        <label>Password </label>
        <input type="password" name="password" />
        <br></br>
        <input type="submit"></input>
      </form>
    </div>
  )

完整错误：

Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'EventTarget'.
  Property '0' does not exist on type 'EventTarget'.  TS7053

Answer 1

你好像理解错了。 onSubmit 事件将不包含任何输入值。要访问输入值，我建议您将它们存储在一个状态中并使用 onChange 绑定它，以便在提交表单时您可以使用状态值进行验证。

使此工作正常进行的简短回答：

将 id 属性添加到输入标签以访问提交时的值。

<input type="email" name="email" id="email" />
<input type="password" name="password" id="password" />


const email = document.getElementById('email').value;
const password = document.getElementById('password').value;

示例：https://codesandbox.io/s/form-submit-demo-fjls0

访问 React.FormEvent<HTMLFormElement> 的目标的任何索引时出现错误 TS7053

Error TS7053 when accessing any index of the target of a React.FormEvent<HTMLFormElement>

javascript

typescript

reactjs

tsx

react-hooks