归纳总结Remix 表单常用方法及示例详解
作者：乔治_x
这篇文章主要为大家归纳总结了Remix 表单常用方法及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
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 中使用了各种表单行为。更多关于Remix 表单用法的资料请关注脚本之家其它相关文章！