我可以使用 useRef 钩子而不是 React js 中的 onChange 事件来更新状态吗？

Question

在寻找避免每次更改输入字段后呈现组件的方法时，我遇到了使用 useRef 而不是 onChange 事件进行状态更新的建议。在简单的组件中似乎没问题，但由于我是初学者，我不知道这在更复杂的应用程序中是否是一种好方法。 Shell 我继续这样还是应该回到 onChange 事件？我进行了很多搜索来解决这个难题，但无法找到明确的答案。欢迎提出这方面的任何建议。

这是它在组件中的样子：

import React, { useRef, useState } from 'react';
import axios from 'axios';

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

  const initialData = {
    firstValue: '',
    secondValue : ''            
  }
  
  const [data, setData] = useState(initialData);
  const formRef = useRef<HTMLFormElement>(null);  
  const firstInputRef = useRef<HTMLInputElement>(null);
  const secondInputRef = useRef<HTMLInputElement>(null);          

  const handleSetData = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {    
    if(firstInputRef.current !== null && secondInputRef.current !== null) {      
      setData({
        ...data, 
            firstValue: firstInputRef.current.value,
            secondValue: secondInputRef.current.value                           
      })      
    }    
  }

  const handleFormSubmit = async (e:React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();   
    const {firstValue, secondValue} = data;
    if(firstValue !== '' && secondValue !== '') {         
      await axios.post('url', {
        ...data    
      }).then((response) => {  });      
    }
  }   

  return(
    <>      
      <form ref={formRef} onSubmit={handleFormSubmit}>        
        <input type='text' ref={firstInputRef} />
        <input type='text' ref={secondInputRef} />            
        <button onClick={handleSetData}> Submit Form </button>
      </form >
    </>
  );
}
export default AddData;

Answer 1

您使用的方法称为非受控表单元素，是官方docs 上受控元素的替代方法。在大多数情况下，React 建议使用受控的，但我想如果你愿意，也可以使用不受控的。

In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

Answer 2

您可以使用

const firstInputRef = useRef (null);

改为

 const firstInputRef = useRef <HTMLFormElement> (null);

react团队推荐 useRef 是 推荐在读取值 时使用，由 React 团队推荐。 useRef 将在每次渲染时为您提供相同的 ref 对象，

请记住，useRef 在其内容更改时不会通知您，您想使用函数 useCallback

我可以使用 useRef 钩子而不是 React js 中的 onChange 事件来更新状态吗？

May I update state using useRef hook instead of onChange event in React js?

state

onchange

reactjs

use-ref