如何解决我可以在 React js 中使用 useRef 钩子而不是 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;
解决方法
您使用的方法称为非受控表单元素,是官方 docs 上受控元素的替代方法。在大多数情况下,React 建议使用受控的,但我认为如果您愿意,也可以使用不受控制的。
在大多数情况下,我们建议使用受控组件来实现 形式。在受控组件中,表单数据由 React 处理 成分。替代方案是不受控制的组件,其中表单数据 由 DOM 本身处理。
,你可以使用
const firstInputRef = useRef (null);
代替
const firstInputRef = useRef <HTMLFormElement> (null);
React 团队推荐 useRef 是读值时的推荐使用,由 React 团队推荐。 useRef 将在每次渲染时为您提供相同的 ref 对象,
请记住,useRef 在其内容更改时不会通知您,您要使用函数 useCallback
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。