这篇文章主要介绍“Remix表单常用方法有哪些”,在日常操作中,相信很多人在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()
}
import { Form } from "@remix-run/react";
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>
);
}
注意手动提交之前先要阻止事件默认行为。
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 属性
没有定义以上两个属性,提交代码的时候,提交函数不会执行
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 是一样的。
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表单常用方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://juejin.cn/post/7211437215336071228