如何在 tsx 文件中引用 getElementByID 等文档方法？

Question

我正在将纯 js 文件转换为 React 应用程序中的打字稿。

document 在我使用 document.getElementById("login-username") 等方法时显示错误

如何在这个打字稿文档中引用document 方法？

import React, { useState, FormEvent, ChangeEvent } from 'react';

interface loginProps {
  username: string,
  setUsername(username: string): string,
  setLoggedIn(loggedIn: boolean): boolean
}

export default function Login(props: loginProps) {
  const { username, setUsername, setLoggedIn } = props;
  const [err, setErr] = useState('');
  function handleUsername(e: FormEvent<HTMLFormElement> ) {
    const user = document.getElementById("login-username").value.trim();
    const password = document.getElementById("login-password").value.trim();
    if (user === '') { setErr('blank username'); } else {  //ugly, will fix later
      if (password === '') { setErr('blank password'); } else {
        if (user.length < 2) { setErr('username must be at least 2 characters'); } else {
          setUsername(user);
          setLoggedIn(true);
        }
      }
    }
    e.preventDefault();
  }
  function setUserField(e: ChangeEvent<HTMLInputElement>) {
    setUsername(e.target.value);
    e.preventDefault();
  }
  return (
    <form onSubmit={handleUsername} autoComplete="yes" style={{ padding: "10px" }}>
      <span style={{ fontWeight: 'bold' }}>Login</span>
      <br /><br />
      <label htmlFor="login-username">Username:</label>
      <input type="text" 
        padding="20px"
        value={username}
        onChange={setUserField}
        name="login-username"
        id="login-username" />
      <label htmlFor="login-password">Password:</label>
      ...

Answer 1

所以在 ReactJS 中最好使用 refs https://reactjs.org/docs/refs-and-the-dom.html

 class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

基本上创建一个变量来访问您的元素。在指定元素上添加 ref 属性并将其分配给变量。然后，您将可以按照 React 的标准访问 DOM 中的元素。

编辑：

这是文档中使用钩子的示例，useRef

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}