如何解决如何使用react-hook-form从后端数据中预填充选择标签选项?
您如何使用react-hook-form将来自后端的数据预填充到select标签中。使用文本输入字段非常简单,但不适用于select标签。
function App(){
const [dataFromDB,setDataFromDB] = useState(null);
useEffec(()=>{
/* fetchdata here */
},[]);
return (
<FormContainer preloadedValues={dataFromDB} />
)
}
这是一个简单的表单,具有2个输入和一个提交按钮,该表单有效:
import {useForm} from "react-hook-form";
function FormContainer ({preloadedValues}){
const {register,handleSubmit,errors} = useForm({
defaultValues: preloadedValues
});
const processData = (data)=>{
// logic to send data back to backend
}
<form onSubmit={handleSubmit(processData)}>
<input name='firstname' ref={register} />
<input name='lastname' ref={register} />
<button type='submit'>Submit</button>
</form>
}
这是带有select标签的,我在这里感到困惑:
const {register,errors} = useForm({
defaultValues: preloadedValues
});
const processData = (data)=>{
// logic to send data back to backend
}
<form onSubmit={handleSubmit(processData)}>
<select
name='selectdata'
ref={register}
>
{
/* do i have to map data here? */
}
</select>
<button type='submit'>Submit</button>
</form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。