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

我正在React应用程序中将普通js文件转换为typescript

当我使用诸如

document.getElementById（“登录用户名”）之类的方法时，
document
显示了一个错误

如何引用此typescript文档中的
文档
方法

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

import React，{useState，FormEvent，ChangeEvent}来自“React”；
接口登录操作{
用户名：string，
setUsername（username:string）：string，
setLoggedIn（loggedIn:boolean）：boolean
}
导出默认函数登录（道具：loginProps）{
const{username，setUsername，setLoggedIn}=props；
const[err，setErr]=useState（“”）；
函数handleUsername（e:FormEvent）{
const user=document.getElementById（“登录用户名”）.value.trim（）；
const password=document.getElementById（“登录密码”）.value.trim（）；
if（user==''）{setErr（'blank username'）；}else{//ught，稍后将修复
if（password==''{setErr（'blank password'）；}else{
if（user.length<2）{setErr（'username必须至少包含2个字符'）；}else{
setUsername（用户）；
setLoggedIn（真）；
}
}
}
e、 预防默认值（）；
}
函数setUserField（e:ChangeEvent）{
setUsername（如target.value）；
e、 预防默认值（）；
}
返回(
登录



用户名：
密码：
...
所以在ReactJS中，最好使用REF
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} />;
  }
}

类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
}
render（）{
返回；
}
}

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

编辑：

下面是一个使用钩子的文档示例

函数TextInputWithFocusButton（）{
const inputEl=useRef（null）；
常量onButtonClick=（）=>{
//`current`指向装入的文本输入元素
inputEl.current.focus（）；
};
返回(
集中输入
);
}

不要使用DOM。以反应的方式进行。您看到的错误是什么？因为您应该能够毫无问题地使用

文档

对象：但实际上，您应该在这里使用refs。功能组件的方法是什么？@Michael

useRef（）

不过，我相信使用受控字段更有效reacty@MichaelDurrant这个答案为您提供了对DOM元素的引用。但是，您似乎希望使用它来获取输入值。有一种更好的方法可以使用受控字段来实现。请参阅reactjs.org/docs/forms.html

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