React挂钩形式寄存器两个范围输入

Question

我正在组装一个可重复使用的范围滑块组件，滑块上有两个旋钮。它是https://codesandbox.io/s/b9l0g?file=/src/multiRangeSlider/MultiRangeSlider.tsx:95-131.为了实现这一点，我使用了两个输入字段。是否有一种方法可以注册两个输入字段，以便在提交表单数据时以数组形式返回？类似[24100]

查看

const {
register,
handleSubmit,
formState: { errors },
} = useForm()
const onSubmit = (data: any) => {
console.log(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<RangeSlider
name="rangeslider"
register={register}
errors={errors}
isRequired={true}
min={0}
max={1000}
/>
</form>
)

范围滑块

<input
type="range"
{...register(name, {
required: {
value: isRequired,
message: `${name} is required`,
},
})}
min={min}
max={max}
value={minVal}
ref={minValRef}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const value = Math.min(+event.target.value, maxVal - 1)
setMinVal(value)
event.target.value = value.toString()
}}
className={`thumb thumb--zindex-3 ${
minVal > max - 100 ? 'thumb--zindex-5' : ''
}`}
/>
<input
type="range"
{...register(name, {
required: {
value: isRequired,
message: `${name} is required`,
},
})}
min={min}
max={max}
value={maxVal}
ref={maxValRef}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const value = Math.max(+event.target.value, minVal + 1)
setMaxVal(value)
event.target.value = value.toString()
}}
className="thumb thumb--zindex-4"
/>
<div className="slider">
<div className="slider__track"></div>
<div ref={range} className="slider__range"></div>
<div className="slider__left-value">{minVal}</div>
<div className="slider__right-value">{maxVal}</div>
</div>

Answer 1

不能注册具有相同名称的两个输入并检索两者的值。但是，您可以更改它们的名称。例如：

{...register(`${name}.lower`)}

和

{...register(`${name}.upper`)}

假设name = "age"，那么您的data对象将如下所示：

{
age: {
lower: 12,
upper: 18
}        
}

但是，首先使用控制器可能更容易。我已经编辑了你用作模板的代码沙盒，以展示如何在这里使用控制器
看这里。