惯性和 React CRUD 无需重新加载页面

Question

如何在不重新加载页面的情况下执行删除操作 Inertia & React。

文章控制器：

public function destroy(Article $article) {
        $article->delete();
        return redirect('/admin');
}

jsx:

function ArticleItem({ article }) {
    const { url } = usePage()
    const inAdminPage = url.includes('/admin') ? true : false

    function onDeleteSubmitEventHandler(e) {
        e.preventDefault()
        Inertia.delete(`/article/${article.id}`)
    }

    return (
        <>....
           {inAdminPage &&
                            <>
                                <div onClick={handleOptionsClick} className="hover:bg-gray-100 hover:cursor-pointer transition rounded-full p-2 relative">
                                    <img src="/icon/options.svg" className="w-1" />
                                </div>
                                {options &&
                                    <div id="options" className="absolute right-7 bottom-0  shadow-md">
                                        <ul>
                                            <form onSubmit={onDeleteSubmitEventHandler}>
                                                <button type="submit" className="hover:bg-gray-200 hover:cursor-pointer bg-white px-4 py-3" >Delete</button>
                                            </form>
                                            <li className="hover:bg-gray-200 bg-white px-4 py-3">Edit</li>
                                        </ul>
                                    </div>
                                }
                            </>
                        }
        </>

    )
}

上面的代码当前需要重新加载页面才能反映数据的删除。我希望删除实时发生，而不需要重新加载页面。

我该怎么做？

谢谢你

Answer 1

尝试在你的handleSubmit中使用它

从'@inertiajs/react'导入{router}；

函数 onDeleteSubmitEventHandler(e) { e.preventDefault() 惯性.删除(

/article/${article.id}

) router.reload({ 仅: ['article'] }) }

https://inertiajs.com/partial-reloads

正如你在惯性.doc中看到的那样

ps：甚至粘贴您的控制器以更清晰 并粘贴此：

返回_route('yourROUTE')