使用react钩子表单验证选择列表

Question

我想使用react-hook-form实现React表单的验证。对于我实现的输入值：

<div className='input-group mb-3'>
<Controller
control={control}
name={"email"} //  the key of json
defaultValue={""}
render={({ field }) => (
<input
{...field}
type="email"
className="form-control"
placeholder="Email"
aria-label="email"
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
</div>

对我来说，还不清楚我需要如何实现选择菜单：

<div className='input-group mb-3'>
<select
className='form-control form-select'
name='budget'
id='budget'
required=''
data-msg='Please select your budget.'
>
<option value=''>Budget</option>                  
<option value='budget3'>More than $500,000</option>
</select>
</div>

执行它的正确方式是什么？

Answer 1

这样的东西行得通吗？

<Controller
control={control}
name="budget"
rules={{
budget: {
required: "Required",
},
}}
render={({ field }) => (
<select name="budget" onChange={field.onChange} value={field.value}>
<option value="">Please select your budget</option>
<option value="budget3">More than $500,000</option>
<option value="budget2">$250,000 - $500,000</option>
<option value="budget1">$100,000 - $250,000</option>
{/* more budgets */}
</select>
)}
/>;

control是从useForm中销毁的，如下所示：

const { controls, register, setValue, ...moreEls } = useForm();