这篇文章主要介绍“Remix表单常用方法有哪些”，在日常操作中，相信很多人在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()
}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'使用钩子函数提交函数
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/loadingdata 表示 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表单常用方法有哪些的详细内容，更多关于Remix表单常用方法有哪些的资料请关注九品源码其它相关文章！