我尝试在嵌套的输入数组上实现拖放功能,我使用的是react-beautiful-dnd
和react-hook-form
库:useFieldArray
挂钩用于管理表单,useController
挂钩用于受控输入。
我面临的问题是,当我尝试重新排序任何子输入时,更改只发生在最后一项。
若要重现此问题,您需要添加至少2个顶级输入沿着为每个顶级输入添加2个嵌套输入。接下来尝试重新排序第一个顶级项的嵌套输入。结果,第二个项的子输入将更改其位置,而最初拖动的输入将恢复到其原始位置。
我尝试将ref
传递给嵌套的输入,并使用useImperativeHandle
钩子从子组件暴露useFieldArray
钩子的move
方法以进行重新排序。
1条答案
按热度按时间yhived7q1#
已解决
我对嵌套字段数组使用了相同的ref来存储reorder子函数,因此当追加新的嵌套子字段数组时,它会覆盖reorder函数,并且只移动属于最后一个嵌套字段数组的项。
为了解决这个问题,我不得不向嵌套字段传递一个函数而不是
ref
,该函数为每个字段创建不同的ref
下面是工作中的sandbox