React钩子表单是一种用于处理表单输入和提交的React库。它提供了一组钩子函数,可以方便地管理表单状态和处理用户输入。
在使用React钩子表单时,可以按照以下步骤来实现在提交后显示输入的功能:
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
useForm
函数来初始化表单:function MyForm() {
const { register, handleSubmit } = useForm();
const [submittedData, setSubmittedData] = useState(null);
const onSubmit = (data) => {
setSubmittedData(data);
};
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<input type="text" name="name" ref={register} />
<input type="email" name="email" ref={register} />
<button type="submit">提交</button>
</form>
{submittedData && (
<div>
<p>您的输入:</p>
<p>姓名:{submittedData.name}</p>
<p>邮箱:{submittedData.email}</p>
</div>
)}
</div>
);
}
register
函数来注册输入字段,并在提交时调用handleSubmit
函数来处理表单提交事件。onSubmit
回调函数中,将表单数据存储到submittedData
状态中。submittedData
状态是否存在来决定是否显示已提交的输入数据。这样,当用户在表单中输入数据并提交后,会在页面上显示用户输入的姓名和邮箱信息。
React钩子表单的优势在于它简化了表单处理的逻辑,提供了一种更简洁、可读性更高的方式来管理表单状态和处理用户输入。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云