这篇文章主要介绍“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'。添加之后就可以正常提交 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表单常用方法有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
