用法: useState或useRef格式提交
用法: useState或useRef格式提交
提问于 2021-07-03 10:39:49
通常，当我处理表单提交时，我使用useState作为输入值，并将onChange事件设置为
const [inputValues, setInputValues] = useState({
title: "",
address: "init"
});
function submitHandler(e) {
e.preventDefault();
const meetupData = {
meetupTitle: inputValues.title,
};
console.log(meetupData);
}
return (
<form onSubmit={submitHandler}>
<div>
<label htmlFor="title">Meetup Title</label>
<input
type="text"
required
id="title"
value={inputValues.title}
onChange={(e) =>
setInputValues({ ...inputValues, title: e.target.value })
}
/>
</div>
<div>
<button>Add Meetup</button>
</div>
</form>
);但在一些教程中，我发现它是使用useRef编写的
const titleInputRef = useRef();
function submitHandler(e) {
e.preventDefault();
const enteredTitle = titleInputRef.current.value;
const meetupData = {
title: enteredTitle,
};
console.log(meetupData);
}
return (
<form onSubmit={submitHandler}>
<div>
<label htmlFor="title">Meetup Title</label>
<input type="text" required id="title" ref={titleInputRef} />
</div>
<div>
<button>Add Meetup</button>
</div>
</form>
);我试着去了解有什么不同，哪一个在一般表现上会更好呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-03 10:48:33
Stack Overflow用户
发布于 2021-07-03 10:54:49
按照目的，如果您使用useState，那么您将得到一个getter和一个setter(这会触发rerender立即更新该值)，而如果使用useRef，则只会得到一个getter。
因此，如果使用useRef，则不需要设置value={state}，而useState需要设置。
通常，如果您想验证用户输入的值(例如，使用onChange事件)，则必须使用useState，如果只想在表单提交时获得值，则可以自由使用useRef。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68235448
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号