Remix 的三种表单
- 原生表单
- Remix 提供的表单组件
- Remix fetcher 表单
回顾表单根底
- 提交行为：enter 按键(只有一个 input type="txt")/应用具备 type=sumbit 的按钮
- method 不指定时，form 默认应用 get 办法
- form 提交后默认行为是跳转到 action 对应的页面
- 表单的提交形式是 content-type = x-www-form-unlencoded
表单提交的模式
- 应用 html 标签属性，主动提交
- 手动提交：钩子函数 sumit 提交形式， fetcher.sumbit 提交形式
阻止跳转
通常咱们不心愿提交表单后产生跳转行为：应用事件阻止函数进行阻止。
const handleClick = (e) => { e.preventDefault()}Remix 提供的表单组件
import { Form } from "@remix-run/react";一个简略的 demo
import { json } from "@remix-run/node";import { Form } from "@remix-run/react";export async function action () { let data = { a: 'this is data' } return json({ ...data })}export default function Index() { return ( <div> <div>Remix Form</div> <Form method="post"> <input type="text" name="a-name-remix"/> <button type="submit">submit-remix</button> </Form> </div> );}留神：Form 组件没有定义 method 的时候，点击提交按钮没有任何成果。个别增加 method='post'。增加之后就能够失常提交 post 申请表单。
应用钩子函数提交函数
import { json } from "@remix-run/node";import { Form, useSubmit } from "@remix-run/react";export async function action () { let data = { a: 'this is data' } console.log(data) return json({ ...data })}export default function Index() { const submit = useSubmit(); const handleClick = (e) => { e.preventDefault() submit(e.target, { method: 'post' }) } return ( <div> <div>Remix Form</div> <Form onSubmit={handleClick}> <input type="text" name="a-name-remix"/> <button type="submit">submit-remix</button> </Form> </div> );}留神手动提交之前先要阻止事件默认行为。
Remix fetcher 表单
一个简略的 demo
import { json } from "@remix-run/node";import { useFetcher } from "@remix-run/react";export async function action () { let data = { a: 'this is data' } return json({ ...data })}export default function Index() { const fetcher = useFetcher(); return ( <div> <div>Remix Form</div> <fetcher.Form method="post"> <input type="text" name="a-name-remix"/> <button type="submit">submit-remix</button> </fetcher.Form> </div> );}Form 增加 post 办法，点击提交按钮，主动提交到以后 Route 模块中的 action 办法中。
没有定义
- method 属性
- action 属性
没有定义以上两个属性，提交代码的时候，提交函数不会执行
应用 fetcher.submit 函数提交
import { json } from "@remix-run/node";import { useFetcher } from "@remix-run/react";export async function action () { let data = { a: 'this is data' } console.log(data) return json({ ...data })}export default function Index() { const fetcher = useFetcher(); const onSubmit = (e) => { e.preventDefault(); fetcher.submit(e.target, { method: 'post', action: '/main/form' }) } return ( <div> <div>Remix Form</div> <fetcher.Form onSubmit={onSubmit}> <input type="text" name="a-name-remix"/> <button type="submit">submit-remix</button> </fetcher.Form> </div> );}onSubmit 中首先就是要解决提交的默认行为问题，阻止了表单的默认行为之后，应用 submit 办法其实与钩子函数 submit 是一样的。
useFetcher 的其余内容
- state 示意以后的条状态
idle/submitting/loading等 - data 示意 action 中响应的数据
- load 函数示意从路由中读取 action 函数返回的数据
- submission 是可能构建 optimistic UI
其余的表单
- 一个应用 useSubmit 钩子函数手动提交 antd 表单的例子
import { Form, Input, Button } from "antd";import { useSubmit } from "@remix-run/react";export async function action() { return { a: 1 }}export default function () { const submit = useSubmit(); const handleClick = (data) => { submit(data, { method: "post", }); }; return ( <div> <Form onFinish={handleClick}> <Form.Item name="name"> <Input /> </Form.Item> <Button htmlType="submit" > 提交 </Button> </Form> </div> );}- 一个手动提交 antd pro-component 表单的例子
import { Button } from "antd";import { ProForm, ProFormText } from '@ant-design/pro-components'import { useSubmit } from "@remix-run/react";export async function action() { return { a: 1 }}export default function () { const submit = useSubmit(); const handleClick = async (data: any) => { submit(data, { method: "post", }); return false }; return ( <div> <ProForm onFinish={handleClick}> <ProFormText name="name" /> <Button htmlType="submit" > 提交 </Button> </ProForm> </div> );}小结
回顾的表单的默认行为，以及在 Remix 提供的表单能力 Form/fetcher.Form。手动提交以及主动治理的两种形式。其次在 antd 零碎的表单中应用 useSubmit 手动提交钩子函数。大略讲到了 Remix 中应用了各种表单行为。