目录Remix 的三种表单回顾表单基础表单提交的形式阻止跳转Remix 提供的表单组件一个简单的 demo使用钩子函数提交函数Remix fetcher 表单一个简单的 demo没有
通常我们不希望提交表单后发生跳转行为:使用事件阻止函数进行阻止。
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 方法中。
没有定义以上两个属性,提交代码的时候,提交函数不会执行
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 是一样的。
idle/submitting/loading
等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>
);
}
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 表单用法的资料请关注编程网其它相关文章!
--结束END--
本文标题: 归纳总结Remix 表单常用方法及示例详解
本文链接: https://www.lsjlt.com/news/201173.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0