React-Hook Form:如何将数量的值转换为 useFieldArray 内的数字?
React-Hook Form: How do I convert the value of the quantity into a number that is inside the useFieldArray?
我已经声明 input
只接收号码:
<input
type="number"
name={`order[${nestIndex}].variantion[${k}].qty`}
ref={register({ required: true })}
defaultValue={item.qty}
style={{ marginRight: "25px" }}
/>
但这仍然会保存为字符串。如何将 quantity
的值转换为数字,或者是否可以将其解析为整数?
数量输入字段在nestedFieldArray
export default ({ nestIndex, control, register }) => {
const { fields, remove, append } = useFieldArray({
control,
name: `order[${nestIndex}].variation`
});
return (
<div>
{fields.map((item, k) => {
return (
<div key={item.id} style={{ marginLeft: 20 }}>
<label>{k + 1}</label>
<input
type="number"
name={`order[${nestIndex}].variantion[${k}].qty`}
ref={register({ required: true })}
defaultValue={item.qty}
style={{ marginRight: "25px" }}
/>
<Size
name={`order[${nestIndex}].variantion[${k}].color`}
menuItems={colorItems}
refer={register({ required: true })}
defaultValue={item.color}
control={control}
/>
</div>
);
})}
<hr />
</div>
);
};
这是数据在控制台中的样子:
在处理程序提交时,您可以使用 parseInt() 将产品数量更改为整数,并将其推送到新的子数组中,在所有产品详细信息转换后,您可以推送它进入新的父数组。
const onSubmit = (data) => {
const newOrder = [];
data.order.forEach(({ product, variantion }) => {
const newVariantion = [];
variantion.forEach(({ qty, color }) => {
newVariantion.push({ qty: parseInt(qty), color });
});
newOrder.push({ product, variantion: newVariantion });
});
action(newOrder);
console.log(newOrder);
push("/step2");
};
我已经声明 input
只接收号码:
<input
type="number"
name={`order[${nestIndex}].variantion[${k}].qty`}
ref={register({ required: true })}
defaultValue={item.qty}
style={{ marginRight: "25px" }}
/>
但这仍然会保存为字符串。如何将 quantity
的值转换为数字,或者是否可以将其解析为整数?
数量输入字段在nestedFieldArray
export default ({ nestIndex, control, register }) => {
const { fields, remove, append } = useFieldArray({
control,
name: `order[${nestIndex}].variation`
});
return (
<div>
{fields.map((item, k) => {
return (
<div key={item.id} style={{ marginLeft: 20 }}>
<label>{k + 1}</label>
<input
type="number"
name={`order[${nestIndex}].variantion[${k}].qty`}
ref={register({ required: true })}
defaultValue={item.qty}
style={{ marginRight: "25px" }}
/>
<Size
name={`order[${nestIndex}].variantion[${k}].color`}
menuItems={colorItems}
refer={register({ required: true })}
defaultValue={item.color}
control={control}
/>
</div>
);
})}
<hr />
</div>
);
};
这是数据在控制台中的样子:
在处理程序提交时,您可以使用 parseInt() 将产品数量更改为整数,并将其推送到新的子数组中,在所有产品详细信息转换后,您可以推送它进入新的父数组。
const onSubmit = (data) => {
const newOrder = [];
data.order.forEach(({ product, variantion }) => {
const newVariantion = [];
variantion.forEach(({ qty, color }) => {
newVariantion.push({ qty: parseInt(qty), color });
});
newOrder.push({ product, variantion: newVariantion });
});
action(newOrder);
console.log(newOrder);
push("/step2");
};