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

编程问答 2022-05-26

问题描述

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

解决方法

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

在大多数情况下，我们建议使用受控组件来实现 形式。在受控组件中，表单数据由 React 处理 成分。替代方案是不受控制的组件，其中表单数据 由 DOM 本身处理。

,

你可以使用

const firstInputRef = useRef (null);

代替

 const firstInputRef = useRef <HTMLFormElement> (null);

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

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

onchangeonchangereactjsreactjsreactjsreactjsstatestatestateuse-ref