UI(autoMate):添加表单组件和请求处理器

📝 UI(autoMate):更新内容页面的表单元素和请求处理逻辑
  📝 UI(autoMate):在路由中引入内容操作处理器
This commit is contained in:
yuruo
2024-06-18 09:01:32 +08:00
parent f0953c4a8b
commit dc6a9687a9
3 changed files with 13 additions and 5 deletions

View File

@@ -1,15 +1,16 @@
import { useLoaderData } from "react-router-dom"
import { Form, useLoaderData } from "react-router-dom"
import "./content.scss"
import { Button } from "antd"
export const Content = () => {
const content = useLoaderData() as ContentType
return (
<Form method="PUT">
<main className="content-page">
<input defaultValue={content.title}/>
<textarea defaultValue={content.content}/>
<input defaultValue={content.title} name="title"/>
<textarea defaultValue={content.content} name="content"/>
<div className="border-t flex items-center justify-center">
<Button type="default" size="small"></Button>
<button></button>
</div>
</main>
</Form>
)
}

View File

@@ -0,0 +1,5 @@
export default async({request}) => {
const data = await request.formData()
console.log(data.get("content"))
return {}
}

View File

@@ -7,6 +7,7 @@ import CategoryLoader from "@renderer/pages/Category/CategoryLoader";
import ContentListLoader from "@renderer/pages/ContentList/ContentListLoader";
import ContentLoader from "@renderer/pages/Content/ContentLoader";
import { Content } from "@renderer/pages/Content/Content";
import ContentAction from "@renderer/pages/Content/ContentAction";
const router = createHashRouter([
{
@@ -31,6 +32,7 @@ const router = createHashRouter([
{
path: "content/:id",
loader: ContentLoader,
action: ContentAction,
element: <Content />
}
]