4

我正在尝试使用 react-springuseSprings来使用户能够重新排序 formik 中的项目FieldArray。useSprings Draggable List 演示（在此处找到）用于useRef管理项目的顺序。FieldArray带有许多用于插入、删除和移动项目的数组辅助函数。

我遇到的问题是：

1）使用formik的数组辅助方法重新排序现有项目move成功改变了数组顺序，但需要额外点击才能呈现正确的顺序

2) 使用数组辅助方法添加或删除数组项会产生意想不到的结果。改变 ref 的长度不会改变order.currentinside ofuseGesture

我也尝试过在道具更改时使用useState而不是useRef更新状态。useEffect

这是我制作的代码沙箱：https ://codesandbox.io/s/usesprings-with-fieldarray-56bex

在bind函数中，注释掉

order.current = newOrder;
并取消注释
// arrayHelpers.move(currIndex, currRow);
显示我上面提到的问题 #1。

我希望能够将 formik 的move、insert和removehelper 函数与 react-spring 一起使用，以无缝地重新排序、添加和删除FieldArray.

4

2 回答 2

1

也许您可以在添加新元素后尝试设置新的 order.current

  onClick={() =>{
          arrayHelpers.insert(items.length, {
            name: `Item ${items.length + 1}`
          })
          order.current = [...order.current, order.current.length];
        }
      }

这将在列表末尾添加新项目。

于 2019-09-17T14:07:00.007 回答
0

我至少遇到了你的 #1 问题。

请注意，该setSprings函数不会自行重新渲染任何内容，并且useSprings缺少dependencies要自动更新的数组。

react-springs@9.0.0.beta-23有一个依赖数组，并且与此处useSpringsFixed链接的沙箱中的包装器一起，它应该强制重新渲染更改的道具。

希望对您的问题也有帮助。

于 2019-06-24T13:53:05.590 回答