歸納總結(jié)Remix?表單常用方法及示例詳解

更新時間：2023年03月24日 11:38:01 作者：喬治_x

這篇文章主要為大家歸納總結(jié)了Remix?表單常用方法及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Remix 的三種表單

原生表單
Remix 提供的表單組件
Remix fetcher 表單

回顧表單基礎(chǔ)

提交行為：enter 按鍵(只有一個 input type="txt")/使用具有 type=sumbit 的按鈕
method 不指定時，form 默認(rèn)使用 get 方法
form 提交后默認(rèn)行為是跳轉(zhuǎn)到 action 對應(yīng)的頁面
表單的提交方式是 content-type = x-www-form-unlencoded

表單提交的形式

使用 html 標(biāo)簽屬性，自動提交
手動提交：鉤子函數(shù) sumit 提交方式， fetcher.sumbit 提交方式

阻止跳轉(zhuǎn)

通常我們不希望提交表單后發(fā)生跳轉(zhuǎn)行為：使用事件阻止函數(shù)進(jìn)行阻止。

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 的時候，點(diǎn)擊提交按鈕沒有任何效果。一般添加 method='post'。添加之后就可以正常提交 post 請求表單。

使用鉤子函數(shù)提交函數(shù)

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>
  );
}

注意手動提交之前先要阻止事件默認(rèn)行為。

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 方法，點(diǎn)擊提交按鈕，自動提交到當(dāng)前 Route 模塊中的 action 方法中。

沒有定義

method 屬性
action 屬性

沒有定義以上兩個屬性，提交代碼的時候，提交函數(shù)不會執(zhí)行

使用 fetcher.submit 函數(shù)提交

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 中首先就是要解決提交的默認(rèn)行為問題，阻止了表單的默認(rèn)行為之后，使用 submit 方法其實與鉤子函數(shù) submit 是一樣的。

useFetcher 的其他內(nèi)容

state 表示當(dāng)前的條狀態(tài) idle/submitting/loading 等
data 表示 action 中響應(yīng)的數(shù)據(jù)
load 函數(shù)表示從路由中讀取 action 函數(shù)返回的數(shù)據(jù)
submission 是可能構(gòu)建 optimistic UI

其他的表單

一個使用 useSubmit 鉤子函數(shù)手動提交 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>
  );
}

小結(jié)

回顧的表單的默認(rèn)行為，以及在 Remix 提供的表單能力 Form/fetcher.Form。手動提交以及自動管理的兩種方式。其次在 antd 系統(tǒng)的表單中使用 useSubmit 手動提交鉤子函數(shù)。大概講到了 Remix 中使用了各種表單行為。更多關(guān)于Remix 表單用法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: