反应：在不使用'onChange'的情况下获取输入值

Question

如何在不使用onChange 的情况下获取输入值？原因是我在加载时使用useEffect 为表单设置动画，使用onChange 会在每个键入的字母上重置动画，这是不希望的。我只想在单击提交按钮时获取输入值（或submitHandler，无论工作如何）。

这是我现在正在使用的：

const [email, setEmail] = useState('')

<input 
type="email" 
className="loginPage-form-item-input" 
name='email' 
value={email} 
onChange={(e) => setEmail(e.target.value)} 
required
/>

const submitHandler = (e) => {
    e.preventDefault()
    dispatch(login(email, password))
  }

我曾尝试使用ref 和useRef，但我不太了解它们，并且出现Function components cannot have string refs 之类的错误。

编辑（使用效果代码）：

const formRef = useRef(null)
  useEffect(() => {
    gsap.from(formRef.current, {duration: 1, y:100, opacity: 0, ease: 'power2.out'})
  })

在表单 div 上使用 ref={formRef}

Answer 1

您正在useEffect 上触发动画，并且该动画的任何状态更新结果都将再次执行。这意味着您没有在 useEffect 正确指定您的依赖项。

当您不指定依赖项时，它将在每次重新渲染时执行。 useEffect 采用第二个参数来声明这些依赖项。因为你只想在挂载时执行，你应该传递一个空数组：

useEffect(() => {
  // animation code
  }, []) // empty array will execute your animation only on mount

useEffect documentation

Answer 2

你可以使用这样的东西。但不推荐做事的方式。

function handleSubmit(e) {
    e.preventDefault()
    const {username, password } = e.target.elements
    console.log({username: username.value, password: password.value })
}

<form onSubmit={handleSubmit}>
   <input type="text" id="username"/>
   <input type="text" id="password"/>
   <input type="submit" value="Login" />
</form>