歸納總結(jié)Remix?表單常用方法及示例詳解
更新時間：2023年03月24日 11:38:01 作者：喬治_x
這篇文章主要為大家歸納總結(jié)了Remix?表單常用方法及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
Remix 的三種表單
- 原生表單
- Remix 提供的表單組件
- Remix fetcher 表單
回顧表單基礎
- 提交行為：enter 按鍵(只有一個 input type="txt")/使用具有 type=sumbit 的按鈕
- method 不指定時，form 默認使用 get 方法
- form 提交后默認行為是跳轉(zhuǎn)到 action 對應的頁面
- 表單的提交方式是 content-type = x-www-form-unlencoded
表單提交的形式
- 使用 html 標簽屬性，自動提交
- 手動提交：鉤子函數(shù) sumit 提交方式， fetcher.sumbit 提交方式
阻止跳轉(zhuǎn)
通常我們不希望提交表單后發(fā)生跳轉(zhuǎn)行為：使用事件阻止函數(shù)進行阻止。
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 請求表單。
使用鉤子函數(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>
);
}
注意手動提交之前先要阻止事件默認行為。
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 屬性
沒有定義以上兩個屬性，提交代碼的時候，提交函數(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 中首先就是要解決提交的默認行為問題，阻止了表單的默認行為之后，使用 submit 方法其實與鉤子函數(shù) submit 是一樣的。
useFetcher 的其他內(nèi)容
- state 表示當前的條狀態(tài)
idle/submitting/loading等 - data 表示 action 中響應的數(shù)據(jù)
- load 函數(shù)表示從路由中讀取 action 函數(shù)返回的數(shù)據(jù)
- submission 是可能構建 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é)
回顧的表單的默認行為，以及在 Remix 提供的表單能力 Form/fetcher.Form。手動提交以及自動管理的兩種方式。其次在 antd 系統(tǒng)的表單中使用 useSubmit 手動提交鉤子函數(shù)。大概講到了 Remix 中使用了各種表單行為。更多關于Remix 表單用法的資料請關注腳本之家其它相關文章！
相關文章
setState() 的執(zhí)行機制包括狀態(tài)合并、批量更新、異步更新、虛擬 DOM 比較和渲染組件等步驟,這樣可以提高性能并優(yōu)化渲染過程,這篇文章主要介紹了react中的setState的執(zhí)行機制,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了詳解React native fetch遇到的坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
antd?是基于?Ant?Design?設計體系的?React?UI?組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品，這篇文章主要介紹了React中使用antd組件,需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了React?Native?的動態(tài)列表方案探索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了react+antd+upload結(jié)合使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了React手寫redux過程，目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下2022-12-12
本篇文章主要介紹了淺談React + Webpack 構建打包優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
react antd-mobile ActionSheet+tag實現(xiàn)多選方式
這篇文章主要介紹了react antd-mobile ActionSheet+tag實現(xiàn)多選方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
要實現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過一段代碼簡單闡述useState鉤子函數(shù)的實現(xiàn)思路,希望對大家有所幫助2023-12-12
這篇文章主要介紹了react中使用video.js的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07