Remix表单常用方法有哪些

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