从 fieldArray Reactjs Hook 计算每一行

Question

如何使用 React Hook Form（功能组件）计算 useFieldArray 每行的数量和费率

这是我的代码

const {
  fields: partsField,
  append: partsAppend,
  remove: partsRemove,
} = useFieldArray({
  control,
  name: "partslist"
});

const watchTest = useWatch({
  control,
  name: "partswatch",
}
    
          
{
  partsField.map((
    {
      id,
      sorCode,
      quantity,
      item,
      rates,
      subtotal
    },
    index
  ) => {               
  const setSubTotal = (index, quantity, rates) => {
  const amount = parseInt(quantity) * parseInt(rates);
  setValue(`partswatch[${index}].subtotal`, amount);
  console.log(quantity, rates);
};

return ( 
  <input 
    {...register(`partswatch[${index}].rates`)}
    onChange={(e) => {
      const rates = e.target.value;
      setSubTotal(index, quantity, rates);
      handleChange("rates");
    }}
  />

  <input 
    {...register(`partswatch[${index}].quantity`)}
    onChange={(e) => {
      const quantity = e.target.value;
      setSubTotal(index, quantity, rates);
      handleChange("quantity");
    }}
  />

  <Input
    type="text" 
    {...register(`partswatch[${index}].subtotal`)}
  />
)
)
}

当我签入控制台日志时，它在 setSubTotal 下未定义更改

我希望的是每行小计会自动计算数量乘以比率和 setValue 到特定数组中的小计字段

Answer 1

我解决了我应该将 usefieldArray 名称传递给 useWatch 以获得每个字段数组的特定值的问题。

 const {
   fields: partsField,
   append: partsAppend,
   remove: partsRemove,
 } = useFieldArray({
  control,
  name: "partslist" // pass to useWatch()
});

const watchTest = useWatch({
 control,
 name: "partslist",
}

从 fieldArray Reactjs Hook 计算每一行

Calculate each row from fieldArray Reactjs Hook

reactjs

react-hooks

react-hook-form