如何使React Admin＆＃x27; S＆lt; SimpleFormiterator＆gt;作为添加物品的堆栈表现（在顶部添加项目）？

发布于 2025-01-26 11:26:36 字数 457 浏览 4 评论 0 原文

我有一个带有项目嵌套列表的项目。我可以使用＆lt; siplyformiterator＆gt; 与A ＆lt; formDataConsumer＆gt; 分别编辑这些嵌套项目。问题是，当我将新项目插入列表中时，它将成为最后一项。我希望它是第一个，然后将其他所有项目转移到一个插槽中。

也许像 addontop 回调一样使用自定义可能会有所帮助？但是我看不到可以使其正常工作的方法，而不会从头开始重写整个组件。

<SimpleFormIterator
     addButton={<ListAddButton onClick={addOnTop??} />}
     removeButton={<ListRemoveButton />}
>
...
</SimpleFormIterator>

原文

I have an item with a nested list of items. I can edit these nested items individually using a <SimpleFormIterator> mixed with a <FormDataConsumer>. The issue is that when i insert a new item in the list, it becomes the last item. I would like it to be the first, and shift every other item down a slot.

Maybe something like using a custom with an addOnTop callback could help? But I don't see a way to make it work without rewriting the whole component from scratch.

<SimpleFormIterator
     addButton={<ListAddButton onClick={addOnTop??} />}
     removeButton={<ListRemoveButton />}
>
...
</SimpleFormIterator>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

任谁 2025-02-02 11:26:36

也许尝试使用unshift（）。这是链接：

回复收藏 0 原文

穿越时光隧道 2025-02-02 11:26:36

最后，我认为我设法解决了这样的事情：

const form = useForm();
    const getData = useCallback(() => {
        const emptyArticle = {
            URL: "",
            title: "",
            image: "",
            eyelet: "",
            topic: "",
        };
        const { articles } = form.getState().values;
        if (!articles) return [emptyArticle];
        articles.pop();
        articles.unshift(emptyArticle);
        return articles;
}, [form]);

<SimpleFormIterator
    addButton={
        <ListAddButton onClick={() => form.change("articles", getData())} />
  }
    removeButton={<ListRemoveButton />}
    TransitionProps={{
        enter: false,
        exit: false,
        addEndListener: () => {},
    }}
>
<SimpleFormIterator/>

我不确定这是最好的方法，但是它似乎有效，尽管目前有一个与此组件的错误迫使使用“ emptyArticle” ，而不是简单地推动 “ undefined” < /em>。

In the end I think I managed to solve doing something like this:

const form = useForm();
    const getData = useCallback(() => {
        const emptyArticle = {
            URL: "",
            title: "",
            image: "",
            eyelet: "",
            topic: "",
        };
        const { articles } = form.getState().values;
        if (!articles) return [emptyArticle];
        articles.pop();
        articles.unshift(emptyArticle);
        return articles;
}, [form]);

<SimpleFormIterator
    addButton={
        <ListAddButton onClick={() => form.change("articles", getData())} />
  }
    removeButton={<ListRemoveButton />}
    TransitionProps={{
        enter: false,
        exit: false,
        addEndListener: () => {},
    }}
>
<SimpleFormIterator/>

I'm not sure it is the best approach, but it seems to work, although there is currently a bug with this component that forces the use of "emptyArticle" instead of simply pushing "undefined".