reactjs 如何在useFieldArray中拖放嵌套数组

yhuiod9q  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(234)

我尝试在嵌套的输入数组上实现拖放功能,我使用的是react-beautiful-dndreact-hook-form库:useFieldArray挂钩用于管理表单,useController挂钩用于受控输入。
我面临的问题是,当我尝试重新排序任何子输入时,更改只发生在最后一项。
若要重现此问题,您需要添加至少2个顶级输入沿着为每个顶级输入添加2个嵌套输入。接下来尝试重新排序第一个顶级项的嵌套输入。结果,第二个项的子输入将更改其位置,而最初拖动的输入将恢复到其原始位置。

我尝试将ref传递给嵌套的输入,并使用useImperativeHandle钩子从子组件暴露useFieldArray钩子的move方法以进行重新排序。

yhived7q

yhived7q1#

已解决

我对嵌套字段数组使用了相同的ref来存储reorder子函数,因此当追加新的嵌套子字段数组时,它会覆盖reorder函数,并且只移动属于最后一个嵌套字段数组的项。
为了解决这个问题,我不得不向嵌套字段传递一个函数而不是ref,该函数为每个字段创建不同的ref

function Parent () {
  const childrenRef = useRef({});
  const setReorder = useCallback(
  (index, reorderCallback) => {
    childrenRef.current[index] = reorderCallback;
  },
  [childrenRef]
 );
  ...

  return (
   <Child
     setReorder={setReorder}
   />
 )
}

function Child ({ setReorder, nestIndex }) {
  useEffect(() => {
    setReorder(`child-${nestIndex}`, (from, to) => {
      move(from, to);
    });
  }, [nestIndex, setReorder, move]);
}

下面是工作中的sandbox

相关问题