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

当组件加载时，我想清除表单并集中显示全名输入

您不需要@JoinColumn(name = "ID")

我想清除表格

让您的refs controlled
声明一个空字符串作为初始值

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

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

1 个答案: