React TypeScript：功能组件中 UseRef 的替代方案

Question

是否有另一种从 dom 获取/设置值的方法比 useRef() 便宜？ 是否像文档建议的那样轻而易举地使用 useRef() ？

import React, { useRef, useEffect } from 'react';

const Join: React.FC = () => {

  const fullName = useRef<HTMLInputElement>(null);
  const email = useRef<HTMLInputElement>(null);
  const password = useRef<HTMLInputElement>(null);
  const myForm = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (myForm.current) myForm.current.reset();
    if (fullName.current) fullName.current.focus();
  }, []);


  return (
    <div>
      <form ref={myForm}>
       <input type='text' ref={fullName} />
       <input type='text' ref={email} />
       <input type='text' ref={password} />
      </form>
    </div>
  )

}

Answer 1

当组件加载时，我想清除表单并关注 fullName 输入

你不需要refs

我想清除表格

• 控制您的inputs
• 声明一个空字符串作为初始值

---

const Component = () =>{
    const [state, setState] = useState({
        email : '',
        password : ''
    })

    const onChange = ({ target: { value, name } }) =>{
        setState(prev => ({
            ...prev,
            [name] : value
        }))
    } 

    const { email, password } = state
    return(
        <>
            <input value={email} onChange={onChange} id='email'/>
            <input value={password} onChange={onChange} id='password' />
        </>
    )
}

自动聚焦给定的输入

只需为此使用autofocus

<input autofocus/>