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

Question

如何在不使用 onChange 的情况下获取输入值？原因是我使用 useEffect 在加载时为表单设置动画，并使用 onChange 在每个键入的字母上重置动画，这是不希望的。我只想在单击提交按钮时将输入值设置为 state（或 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.

之类的错误

编辑（useEffect代码）：

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

在表单 div

上使用 ref={formRef}

Answer 1

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

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>

Answer 2

您正在 useEffect 上触发动画，该动画的任何状态更新都会再次执行。这意味着您没有在 useEffect.

处正确指定依赖项

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

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

useEffect documentation

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

React: get input values without using 'onChange'

reactjs

input

onchange