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

在寻找避免在每次更改输入字段后呈现组件的方法时，我遇到了一个建议，即在状态更新中使用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;

import React，{useRef，useState}来自“React”；
从“axios”导入axios；
const AddData:React.FC=（）=>{
常量初始数据={
第一个值：“”，
第二个值：“”
}
const[data，setData]=使用状态（initialData）；
const formRef=useRef（null）；
const firstInputRef=useRef（null）；
const secondInputRef=useRef（null）；
常量handleSetData=（e:React.MouseEvent）=>{
如果（firstInputRef.current！==null&&secondInputRef.current！==null）{
设置数据({
…数据，
firstValue:firstInputRef.current.value，
secondValue:secondInputRef.current.value
})      
}    
}
const handleFormSubmit=async（e:React.FormEvent）=>{
e、 预防默认值（）；
常量{firstValue，secondValue}=数据；
如果（第一个值！=''&&secondValue！=''）{
等待axios.post（'url'{
…数据
})。然后（（响应）=>{}）；
}
}   
返回(
提交表格
);
}
导出默认数据；

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

在大多数情况下，我们建议使用受控组件来实现 形式。在受控组件中，表单数据由React处理 组成部分。另一种选择是非受控组件，其中包含表单数据 由DOM本身处理

你可以用

const firstInputRef = useRef (null);

反而

 const firstInputRef = useRef <HTMLFormElement> (null);

const firstInputRef=useRef（null）；

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

---

请记住，useRef的内容发生更改时不会通知您，您需要使用useCallback函数，谢谢您的回答。我是否应该在使用表单时考虑太多关于重新招标的问题？@ahmed.zubaca不客气，如果答案对您有帮助，您可以接受。如果您有大型表单或注意到性能问题，您可以考虑重新提交，在这种情况下，我建议您研究

React.memo

和

useCallback

函数，您可以创建自定义表单组件，例如，如果它们的输入没有更改，它们不会重新提交。您帮了我很多。我现在的理解是，这种不受控制的形式，基本上，并没有错。谢谢，再来一次。